酷炫相冊是一個可以吸引用戶注意力的網頁設計元素，它可以讓網站看起來更加漂亮、現代化。使用 CSS 代碼可以輕松地創建出這樣一個相冊。以下是一些例子。

.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.gallery-item {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.2);
}

上面這段 CSS 代碼創建了一個基本的相冊布局。它使用一個名為“gallery”的包含元素，內部包含多個類名為“gallery-item”的子元素。每個“gallery-item”都是一個正方形的區域，包括一張照片、一個圓角邊框和鼠標懸停效果，鼠標懸停時它會使用 CSS 變換將其尺寸增加到原來的1.2倍。

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 200px;
gap: 10px;
padding: 10px;
}
.gallery-item {
background-size: cover;
background-position: center;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.2);
}

上面這個例子使用 CSS Grid 布局創建相冊。和之前的布局不同，這個例子中不需要為每個元素指定寬度和高度，而是使用一個自動化布局。該布局將自動調整主要軸上元素的數量，以滿足它們在次要軸上的要求。因此在這個例子中，我們使用了 grid-template-columns 屬性來創建一個自動化布局，使用 minmax 函數設置元素寬度的最小和最大值，使用 repeat 函數來自動排列列。每個相冊項目仍然具有同樣的 CSS 樣式。

無論是使用第一個例子還是第二個例子，你都可以通過屬性更改樣式、顏色、字體，以使相冊看起來更加美觀。這里展示的示例僅僅是讓你入門。你可以通過閱讀更多的 CSS 文檔，嘗試不同的變體，以實現想要的效果。