在前端開發中，我們經常需要設置填充格子的效果。這里介紹一下如何使用CSS來實現。

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /*三列，平均分配空間*/
grid-gap: 10px; /*格子之間的間隔*/
background-color: #ccc;
padding: 10px;
}
.grid-item {
background-color: #fff;
padding: 20px;
}

如上所示，我們首先創建了一個具有三列的網格，每一列占據相等的空間。我們也可以根據需要來調整列數和每列的寬度。此外，我們還設置了網格項之間的間距和背景顏色，并在每個項目周圍都添加了填充。

接下來，我們需要在HTML中引用CSS樣式。我們可以使用類或ID來標識我們要設置樣式的網格。具體方法如下：

<div class="grid">
<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>

如上所示，我們定義了一組網格項目。這些項目將在我們的網格中顯示，并自動適應它的大小。

最后，我們運行我們的代碼，就會看到一個填充格子的頁面！