CSS 六宮格——簡(jiǎn)單實(shí)用的布局方案

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ddd;
text-align: center;
font-size: 30px;
}
.grid-item:nth-child(odd) {
background-color: #eee;
}

CSS 六宮格是一種簡(jiǎn)單實(shí)用的布局方案，可以在網(wǎng)頁(yè)中實(shí)現(xiàn)六個(gè)等分的方格排列，而且適用于響應(yīng)式布局。下面是一個(gè)簡(jiǎn)單的六宮格布局代碼：

<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 class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

以上代碼中，.grid-container 定義了網(wǎng)格容器，其中包含了六個(gè) .grid-item 元素。grid-template-columns 和 grid-template-rows 屬性定義了網(wǎng)格的列和行，repeat() 函數(shù)可以快速生成列和行的重復(fù)模式，1fr 表示所占比例為 1，grid-gap 屬性定義了網(wǎng)格間隔。

.grid-item 元素指定了方格的樣式，其中 nth-child() 偽類(lèi)選擇器在奇數(shù)項(xiàng)上為方格添加了背景色，達(dá)到了交替顏色效果。

使用 CSS 六宮格可以快速實(shí)現(xiàn)網(wǎng)站的布局，而且方便靈活，具有很高的可定制性。當(dāng)然，需要注意的是，要考慮到不同設(shè)備的屏幕大小以及瀏覽器的兼容性。