在網頁設計中，CSS是不可缺少的一部分。CSS可以控制網頁的樣式和布局，讓網頁更加美觀和易于閱讀。其中，CSS小格子是常見的一種設計，可以用于制作網頁的背景、分割線和元素間距等。

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
column-gap: 10px;
row-gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 10px;
}

如上所示，我們定義了一個名為.grid的CSS類，它使用了CSS3的網格布局（grid）。其中，grid-template-columns規定了網格的列數和寬度，這里我們定義了一個3列的網格，每一列的寬度均為1份（1fr）。grid-auto-rows則規定了網格的行高，每一行高度都為100像素。同時，還在列和行之間定義了10像素的間隔。

其次，我們定義了一個名為.grid-item的CSS類，它用于定義網格中每一個小格子的樣式。這里我們為小格子設置了灰色的背景和淡灰色的邊框，并為其添加了10像素的內邊距。

通過使用這個CSS類和相應的HTML結構，我們就可以輕松地制作出如下簡單的網格效果：

1
2
3
4
5
6

這只是CSS小格子的基礎應用之一，通過不同的參數和結構，我們可以實現更加多樣化的網格設計。相信在未來的網頁開發中，這種簡單實用的設計方式會繼續得到廣泛的應用。