CSS的4宮格是一種非常實用的布局方式，可以使網頁看起來更加美觀和整潔。下面我們來詳細了解一下如何實現4宮格。

1
2
3
4

首先需要創建一個grid-container容器，這個容器將成為我們4宮格布局的主要容器。然后在這個容器里面放置四個小盒子grid-item，每個小盒子的內容可以自己定義。

.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
background-color: #ccc;
color: #fff;
text-align: center;
padding: 30px 0;
}

接下來需要為grid-container容器設置樣式，這里我們使用grid布局，將容器分成兩行兩列，每個小格子的大小是相同的，并且設定了行與列之間的間距為10px。

最后我們對grid-item進行基礎的樣式設置，如背景顏色、文本顏色、文字居中和內邊距等樣式。

通過上述步驟，我們可以輕松地實現CSS的4宮格布局，快來嘗試一下吧！