CSS四方格布局是一種用于設計網頁布局的方法，通過將網頁分成四個等大的方格來布局頁面，使得頁面更易于閱讀和導航。

.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
background-color: #eee;
border: 1px solid #ddd;
}

以上代碼定義了一個包含四個等大小方格的網格布局。其中，grid-template-columns和grid-template-rows分別指定了網格的列數和行數，repeat(2, 1fr)表示將該屬性值重復兩次，并把網格平均分為兩行或兩列。而gap屬性用于設置網格之間的間距。

在每個方格中，我們可以添加各種內容，例如文字、圖像或表單等。

方格1
方格2
方格3
方格4

以上代碼展示了如何在網格布局的四個方格中添加內容。其中每個方格都有一個類名為grid-item，可以通過該類名來設置方格的樣式和布局。

總的來說，CSS四方格布局是一種流行的網頁布局方法，通過該方法可以輕松實現網頁的設計和排版。