在前端開發中，CSS 正方格是非常常用的一種描繪網頁布局的方式。它可以用來創建簡單的背景，也可以作為網格系統的基礎。下面我們來看一下如何使用 CSS 生成一個正方格。

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 1rem;
background-color: #f2f2f2;
padding: 1rem;
}
.grid-item {
background-color: #fff;
}
/* 如果要設置不同的寬度和高度，只需在每個格子中添加以下代碼 */
.item-1-2 {
grid-column: 1 / span 2;
grid-row: 2 / span 1;
}

以上代碼使用了display: grid屬性來創建網格系統，并通過grid-template-columns和grid-template-rows屬性來設置網格的列數和行數。這里我們設置了 4 列和 4 行的正方形網格。grid-gap屬性可以設置網格之間的間隔。

接著，我們為每個網格單獨設置了背景色，并在每個網格中添加了相關內容。如果想設置某個網格的寬度、高度或位置，可以借助grid-column和grid-row屬性來實現。

通過這種方式，我們可以快速創建出自己想要的正方格，并進行靈活調整。CSS 正方格是網頁布局中不可或缺的一部分，同時它也是一項基礎而實用的技能。