<div>標簽是HTML中的一個塊級元素，它主要用于創建容器來組合其他HTML元素。而在CSS中，我們可以使用<div>標簽來創建網格布局。網格布局是一種強大的CSS功能，它允許我們將頁面劃分為行和列的網格，以便更好地控制和布局頁面中的元素。
在網格布局中，我們可以使用兩個主要的CSS屬性：display和grid-template-columns/grid-template-rows。通過設置display屬性為grid，我們可以將元素容器設置為網格布局。而通過grid-template-columns和grid-template-rows屬性，我們可以定義每個網格單元格的大小和排列方式。
下面是幾個案例，詳細解釋了如何使用CSS創建網格布局。
案例一：

<div class="grid-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
</div>

在這個案例中，我們創建了一個包含四個網格單元格的網格容器，分別是item1、item2、item3和item4。我們可以通過CSS樣式來設定每個單元格的大小和對齊方式，以實現我們想要的布局效果。
案例二：

<div class="grid-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
</div>

在這個案例中，我們創建了一個相同大小的網格容器，每個單元格的大小都是固定的，都是相等的。這樣可以實現類似于平鋪網格的效果。
案例三：

<div class="grid-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>

在這個案例中，我們創建了一個帶有6個單元格的網格容器。其中前四個單元格（item1到item4）大小相等，而后面兩個單元格（item5和item6）大小不同。這樣可以實現不同大小的網格布局。
通過以上幾個案例，我們可以看到如何使用CSS來創建網格布局。網格布局的靈活性提供了更好的元素排列和布局的方式，幫助我們實現更吸引人和專業的網頁設計。使用CSS網格布局，我們可以輕松地在網格容器中放置和定位元素，并且可以根據需要進行自定義調整。