CSS是前端開發中常用的樣式語言，除了可以控制頁面的布局和風格，還可以用來繪制圖形。在本文中，我們將介紹如何使用CSS繪制方格圖。

/* 創建一個方格 */
.square {
width: 50px;
height: 50px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 將方格排列成網格 */
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 每行5個方格 */
grid-gap: 10px; /* 方格之間的間距 */
}

以上代碼是繪制方格圖的核心代碼。首先，我們創建了一個方格，設置了它的寬度、高度和背景顏色，并添加了邊框。接著，我們使用CSS的網格布局將方格排列成一個網格，使用`repeat(5, 1fr)`指示每行包含5個相同的列，并且列的寬度平均分配。

此外，我們還設置了方格之間的間距，使網格看起來更整齊。如果需要調整方格的數量和方格的尺寸，可以修改上面的代碼中的`repeat()`和方格的寬度和高度。

現在，我們已經創建了一個基本的方格圖。要使用它，只需要在HTML中創建一個類為`grid`的容器，并在其中添加類為`square`的方格。

<div class="grid"><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div>...
</div>

可以在網格容器中添加任意數量的方格，并根據需要進行自定義，例如添加更多的樣式和交互效果。

繪制方格圖是CSS圖形繪制中的基礎，可以用于創建數據可視化、地圖、游戲等等。希望這篇文章能夠幫助你了解CSS繪制方格圖的方法。