，我們需要在HTML文件中創建一個容器元素，用來包含所有的網格區塊。我們可以給這個容器元素一個唯一的ID或者類名，方便我們在CSS樣式中引用。接下來，我們可以使用<div>標簽創建各個網格區塊。通過設置各個網格區塊的CSS樣式，我們可以實現不同大小和位置的網格布局。
下面是一個使用<div>標簽創建一個簡單的兩列網格布局的例子：
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="item">網格區塊1</div>
<div class="item">網格區塊2</div>
<div class="item">網格區塊3</div>
<div class="item">網格區塊4</div>
</div>在這個例子中，我們在CSS樣式中設置了一個名為.container的類，用于定義整個網格的樣式。通過設置display屬性為grid，我們告訴瀏覽器這個容器元素需要以網格布局的方式顯示。然后，我們使用grid-template-columns屬性來定義網格的列數量和寬度。在這個例子中，我們設置了兩個等寬的網格列。最后，我們使用grid-gap屬性來定義網格區塊之間的間距。
每個網格區塊都是使用<div>標簽創建的，它們都有一個名為item的類。通過在CSS樣式中對.item類進行定義，我們可以設置每個網格區塊的樣式。在這個例子中，我們設置了背景顏色為灰色，并且添加了一定的內邊距。
除了指定等寬的列數，我們還可以通過設置fr單位來創建自適應寬度的網格列。下面是一個例子：
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="item">自適應寬度</div>
<div class="item">固定寬度</div>
</div>在這個例子中，我們設置了兩個網格列，第一個列的寬度為第二個列的一半。通過設置fr單位，我們可以實現自適應寬度的網格列。
除了水平方向的網格布局，我們還可以創建垂直方向的網格布局。下面是一個例子：
<style>
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="item">網格區塊1</div>
<div class="item">網格區塊2</div>
<div class="item">網格區塊3</div>
<div class="item">網格區塊4</div>
</div>在這個例子中，我們設置了兩行等高的網格區塊。通過設置grid-template-rows屬性，我們可以定義網格的行數量和高度，實現自定義的網格布局。
通過使用<div>標簽和簡單的CSS樣式，我們可以輕松地創建靈活的網格布局。無論是兩列、自適應寬度還是垂直方向的布局，都可以通過調整CSS樣式來實現。希望本文提供的<div>網格教程對你有所幫助！