CSS div 格子是一種常用的布局方式，可以將一個頁面劃分為多個等寬或不等寬的矩形區(qū)域，以便更好地組織和排列內(nèi)容。通過CSS的樣式定義，可以實現(xiàn)多種不同風格的格子布局。
下面將通過幾個代碼案例詳細解釋CSS div 格子的用法及效果。
案例一：等寬格子布局
這是一種常見的等寬格子布局，每個格子的寬度相等，可以用于展示圖片、產(chǎn)品列表等等。下面是一個簡單的例子：

<code>
<div class="grid-container">
<div class="grid-item">格子1</div>
<div class="grid-item">格子2</div>
<div class="grid-item">格子3</div>
<div class="grid-item">格子4</div>
</div>
</code>

<code>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
<br>
.grid-item {
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
</code>

在上面的例子中，我們使用了一個含有4個格子的容器，并將每個格子的寬度設(shè)為1fr。通過設(shè)置grid-gap屬性，可以在格子之間添加間隔。在格子的樣式中，我們設(shè)置了背景顏色、居中對齊和內(nèi)邊距。
案例二：不等寬格子布局
有時候，我們希望每個格子的寬度不同，以使布局更加靈活和多樣化。下面是一個不等寬格子布局的例子：

<code>
<div class="grid-container">
<div class="grid-item grid-item--wide">寬格子</div>
<div class="grid-item grid-item--narrow">窄格子</div>
<div class="grid-item grid-item--medium">中等格子</div>
</div>
</code>

<code>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
<br>
.grid-item {
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
<br>
.grid-item--wide {
grid-column: span 2;
}
<br>
.grid-item--narrow {
grid-column: span 1;
}
<br>
.grid-item--medium {
grid-column: span 1;
}
</code>

在上述例子中，我們使用了不同的class來定義不同寬度的格子。通過設(shè)置grid-column屬性，我們可以控制每個格子占據(jù)的列數(shù)，從而實現(xiàn)不等寬的效果。
案例三：響應(yīng)式格子布局
響應(yīng)式設(shè)計是現(xiàn)代網(wǎng)頁設(shè)計中非常重要的一部分。我們希望能夠在不同設(shè)備上，根據(jù)屏幕大小和布局需求來調(diào)整格子的顯示。下面是一個響應(yīng)式格子布局的例子：

<code>
<div class="grid-container">
<div class="grid-item">格子1</div>
<div class="grid-item">格子2</div>
<div class="grid-item">格子3</div>
</div>
</code>

<code>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
<br>
.grid-item {
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
</code>

在上面的例子中，我們使用了repeat和auto-fit屬性來實現(xiàn)響應(yīng)式布局。通過設(shè)置grid-template-columns屬性為repeat(auto-fit, minmax(250px, 1fr))，格子的寬度將自動調(diào)整以適應(yīng)屏幕大小，并且最小寬度不能小于250px。這樣，無論是在大屏幕上顯示多個格子，還是在小屏幕上只能顯示一個格子，都能保持良好的布局效果。
通過以上幾個代碼案例的解釋，我們可以看到CSS div 格子的布局方式及使用方法。通過合理的設(shè)置樣式和屬性，我們可以實現(xiàn)不同風格和需求的格子布局，為頁面的展示和排版提供更多選擇和靈活性。在實際開發(fā)中，可以根據(jù)具體需求和設(shè)計要求，靈活運用CSS的特性來創(chuàng)建漂亮而高效的網(wǎng)頁布局。