CSS自動根據圖片數量做宮格

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

這段CSS代碼可以讓圖片自適應宮格布局，無論圖片數量多少，都能夠完美呈現。其中，grid-template-columns屬性通過repeat函數中的auto-fit參數和minmax函數中的最小最大值參數，可以讓根據圖片數量自動分配列數，并且限制每列的最小和最大寬度，保證排版質量。