CSS格子效果圖是一種很常見的網(wǎng)頁設(shè)計樣式，一般用于展示產(chǎn)品或方便快速定位。它是通過CSS的grid屬性來實現(xiàn)的。以下是一段基本的grid代碼示例：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 50px);
gap: 10px;
}
.box {
background-color: #eee;
border: 1px solid #000;
padding: 10px;
}

在上面的示例中，我們定義了一個名為.container的容器，它使用display：grid屬性來聲明它是一個網(wǎng)格布局容器。接著，我們使用grid-template-columns和grid-template-rows屬性定義了容器中的列和行數(shù)量和大小，使用repeat函數(shù)來設(shè)置重復(fù)模式，1fr表示自動填充剩余空間。然后，使用gap屬性來設(shè)置網(wǎng)格間距。最后，我們定義了.box類來設(shè)置具體單元格的樣式。

如果我們要添加更多單元格，只需要在HTML代碼中添加更多的元素，并為它們設(shè)置相應(yīng)的class即可：

<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

這樣，我們就可以創(chuàng)建一個漂亮而現(xiàn)代的格子效果圖，用于展示產(chǎn)品或方便頁面定位。