今天，小明拍了一些校園照片，想要通過自己的網(wǎng)站來展示。他知道CSS布局可以幫助他更好地展示這些照片，于是開始探索。

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
}

小明喜歡用CSS Grid布局來展示他的照片。他使用了一個名為.gallery的class來包裹他的照片，并且添加了一些樣式。其中，display: grid表示這是一個網(wǎng)格布局，而grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))則是設置了每一列的最小寬度為200像素，最大寬度為1個單位。通過repeat()函數(shù)和auto-fit參數(shù)，可以讓每行顯示盡可能多的圖片。

此外，小明還為每個圖片添加了一些樣式，包括寬度為100%、高度根據(jù)比例自適應、以及object-fit: cover來確保圖片盡可能地填充整個區(qū)域。

在小明的網(wǎng)站上，這些照片排列整齊，無論是在電腦上還是在手機上都非常美觀。我們也可以通過CSS布局來讓我們的網(wǎng)站更加精美。