四格圖CSS是一種可愛而又有趣的CSS布局，可以創建一個由四個等大方塊組成的網格。這種布局非常適合用于相冊、商品展示等網站。

實現四格圖布局，我們需要使用HTML和CSS。首先，我們需要在HTML文件中創建一個包含四個等大方塊的容器，可以使用div標簽完成。每個方塊可以使用一個div標簽來實現。

<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>

上述代碼中，我們創建了一個class為"grid-container"的容器，其中包含了四個class為"grid-item"的方塊。接下來，我們需要使用CSS將它們排列起來。

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

使用display屬性，我們將容器設置為一個網格布局。然后，我們使用grid-template-columns和grid-template-rows屬性分別設置列和行的大小和數量。在這里，我們將列和行都設置為兩個，大小為1fr，這意味著每個方塊都將占據容器的四分之一。

最后，我們設置了方塊的背景色為灰色。

使用上述CSS樣式，我們就可以得到一個基本的四格圖布局。如果需要更改方塊大小、顏色、邊框等樣式，只需要更改CSS即可。