CSS 是前端開發的重要組成部分，它不僅可以控制網頁的布局和樣式，還可以利用 CSS 的畫圖功能來繪制方格網。下面我們就來看一下如何用 CSS 來畫方格線。

/* 設置容器的背景色以及邊框的樣式 */
.container {
background-color: #f5f5f5;
border: 1px solid #ddd;
}
/* 設置網格線的樣式 */
.container:after{
content: "";
display: block;
clear: both;
}
.row {
margin: 0 -5px;
}
.col {
float: left;
padding: 0 5px;
width: 20%;
box-sizing: border-box;
height: 50px;
border: 1px solid #ddd;
}

以上的代碼中，我們先設置容器的樣式，包括背景色和邊框的樣式。接著我們使用after偽元素來繪制網格線。通過設置這個元素的樣式，我們可以在容器的下面繪制一條虛線，達到分割的效果。

然后我們使用“行”和“列”的概念來繪制方格網。為了達到效果，我們需要讓“列”元素浮動并設置其寬度為 20%。同時，我們為“列”元素設置了一個border，以達到繪制邊框的目的。在處理“行”元素的時候，我們則需要為其設置一個margin值，以實現對“列”元素的包裹并取消 margin 的默認值。

最后我們要注意的是，要使用盒子模型的box-sizing為border-box，這樣才可以讓元素的寬度和邊框不會重疊。

以上的代碼已經可以實現一個簡單的方格網布局，你可以根據實際需求進行變換和優化。希望這篇文章可以幫助到你，讓你更好地掌握 CSS 的畫圖能力。