CSS div平鋪是指在網頁布局中使用CSS的div元素進行排列和布局的一種技術。通過合理使用CSS樣式和屬性，我們可以實現自適應的網頁布局，使元素在網頁中鋪開。下面將通過幾個代碼案例詳細說明CSS div平鋪的實現方式。
<div>

案例一：垂直平鋪

<code>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</code>

在上述代碼中，我們使用了.container和.item兩個CSS類。.container類用于設置整個容器的樣式，.item類用于設置每個子元素的樣式。

<code>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<br>
    .item {
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ccc;
margin-bottom: 10px;
}
</code>

通過flex布局方式，我們將子元素在垂直方向上進行平鋪，并使用justify-content屬性設置元素間的間距。

</div>
<div>

案例二：水平平鋪

<code>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</code>

和上一個案例類似，我們同樣使用了.container和.item兩個CSS類。不同的是，在.container類中，我們將flex-direction屬性設置為row。

<code>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<br>
    .item {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ccc;
margin-right: 10px;
}
</code>

通過將子元素在水平方向上進行平鋪，并使用justify-content屬性設置元素間的間距，我們實現了水平平鋪的效果。

</div>
<div>

案例三：網格平鋪

<code>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</code>

在上述代碼中，我們同樣使用了.container和.item兩個CSS類。不同的是，在.container類中，我們將display屬性設置為grid，并使用grid-template-columns屬性設置每列的寬度。

<code>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
<br>
    .item {
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
</code>

通過將子元素按照網格方式進行平鋪，并使用grid-template-columns屬性設置每列的寬度，我們實現了網格平鋪的效果。

</div>
通過以上幾個案例的說明，我們可以看到，使用CSS div平鋪技術可以快速實現網頁布局的需求。無論是垂直平鋪、水平平鋪還是網格平鋪，只需要通過設置相應的CSS樣式和屬性，就能輕松實現所需的布局效果。這種靈活性和可實現性使CSS div平鋪成為網頁設計和布局中的重要技術。