CSS繪制網(wǎng)格很容易。我們可以使用CSS的邊框?qū)傩曰蛘弑尘皩傩詠懋嬀W(wǎng)格。

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.grid-item {
border: 1px solid black;
}

使用以上代碼，我們創(chuàng)建了一個包含25個網(wǎng)格子的網(wǎng)格，每個子網(wǎng)格為一個1/5之寬的列和1/5之高的行。由于我們在每個網(wǎng)格子中都設(shè)置了1像素的邊框，因此網(wǎng)格線呈現(xiàn)出清晰的線條。

如果您想要更細的網(wǎng)格線，可以使用CSS的偽類選擇器來實現(xiàn)：

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.grid-item {
border: 1px solid black;
}
.grid-item:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid gray;
}

在上面的代碼片段中，我們使用了:before偽類來創(chuàng)建網(wǎng)格線。我們設(shè)置了絕對定位，使得這個偽元素“覆蓋”在每個網(wǎng)格子上方。然后我們定義了一條1像素寬的灰色邊框，并且確保這條邊框與網(wǎng)格子有足夠的距離。

在CSS中，您不僅可以使用邊框來畫網(wǎng)格，還可以使用背景屬性。在以下示例中，我們將背景顏色設(shè)置為網(wǎng)格線的顏色：

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
background-color: gray;
}
.grid-item {
background-color: white;
}

模擬出邊框時，你可以使用白色的背景色讓網(wǎng)格子看起來更好。

以上是三個簡單的方法，您可以使用它們來繪制出漂亮的網(wǎng)格。您可以嘗試添加不同的效果和樣式，以找到最適合您的網(wǎng)格的設(shè)計。