CSS Grid是一種可用于創建網格布局的CSS屬性。在過去的幾年中，瀑布流布局已經成為了Web設計中很流行的一種，這種布局可以使你在頁面上展示你的圖片和信息。 CSS Grid是一種二維布局系統，可以輕松地創建多列和多行的布局，最大的優勢是可以非常容易地定位和居中元素。通過CSS Grid，可以更方便地實現瀑布流布局，并且可以根據視口的大小重新布局。讓我們來看看如何使用CSS Grid創建瀑布流。 首先，我們需要將圖片和相關的文字放在具有相同類別的div中。我們可以使用一個簡單的HTML文件來創建一個瀑布流布局：

<div class="grid"><div class="thumbnail"><img src="image1.jpg" alt="Image 1"><p>Image 1</p></div><div class="thumbnail"><img src="image2.jpg" alt="Image 2"><p>Image 2</p></div><div class="thumbnail"><img src="image3.jpg" alt="Image 3"><p>Image 3</p></div></div>

將這些div放入一個類為“grid”的容器中使得我們能夠將它們轉化為網格布局。為此，我們需要使用經典的CSS Grid屬性：grid-template-columns和grid-auto-rows。例如，如果你想要每一行放置三個圖像，則可以將grid-template-columns設置為repeat(3, 1fr)，如下所示：

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 300px;
}

這里我們使用“1fr”來指定每一列的大小，這意味著它們將被平均分配到主容器中。現在，如果我們在一個包含9個圖像的div內應用這個規則，則會將它們按照3x3的網格布局進行排列。注意：在添加grid-template-columns屬性時，要確保其包含適當數量的重復函數（在本例中為3 – 對應于我們想要的每一行的列數）和適當的尺寸單位（在本例中為“1fr”）。 一旦我們確定了我們的列寬，我們還需要為行指定尺寸值。我們可以使用grid-auto-rows屬性來指定行的高度。在本例中，我們將圖像容器的高度設置為300像素，這可以根據你需要調整。 現在我們已經設置好了基本框架，我們可以使用CSS Grid的其他功能來定位每個圖像的位置。通過使用grid-column-start和grid-row-start屬性，我們可以偏移圖像的位置并使其完全適應我們的需求。 例如：

.thumbnail:nth-child(2) {
grid-column-start: 2;
grid-row-start: 2;
}

這意味著第二個縮略圖將出現在我們的網格的第二列和第二行。你可以通過適當改變這些屬性的值來移動圖像的位置。 最后，你可以使用CSS Transition屬性來為我們的移動不同圖像添加動畫效果。添加一個如下所示的樣式：

.thumbnail {
transition: all .3s ease;
}

這可以為移動時添加流暢的動畫效果。 綜上所述，CSS Grid提供了一種簡單但強大的方式來實現瀑布流布局。使用CSS Grid，我們可以快速輕松地創建自適應布局和有吸引力的設計，而無需使用任何其他的庫或框架。