2×2 div是指在HTML和CSS中，通過使用div元素創建一個2×2的布局格子。這個布局允許我們將網頁內容分成四個區域，每個區域可以放置不同的內容或者組件。2×2 div布局常用于創建頁面的網格設計，以使頁面布局更加清晰和有序。
下面我們通過幾個代碼案例來詳細說明2×2 div的具體用法和實現方式。
案例一：最簡單的2×2布局
，我們需要在HTML文件中創建4個div元素，并給每個div添加一個對應的類名。然后在CSS文件中，對這些類名進行樣式定義，以實現2×2布局。

html
<div class="grid">
<div class="item1">內容1</div>
<div class="item2">內容2</div>
<div class="item3">內容3</div>
<div class="item4">內容4</div>
</div>

css
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
<br>
.item1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
background-color: #f44336;
}
<br>
.item2 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
background-color: #4caf50;
}
<br>
.item3 {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
background-color: #2196f3;
}
<br>
.item4 {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
background-color: #ff9800;
}

在上面的示例中，我們使用grid-template-columns和grid-template-rows屬性分別定義了2列和2行的網格布局。gap屬性用于設置行和列之間的間隔。然后，我們使用grid-column和grid-row屬性為每個項目指定了它的網格位置。最后，通過為每個項目定義不同的背景顏色，使得我們可以清楚地看到它們在網格布局中的位置。
案例二：自適應2×2布局
有時候，我們希望2×2布局能夠自動適應頁面的大小變化。我們可以使用CSS的@media查詢來實現這個功能。

css
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
<br>
.item1 {
background-color: #f44336;
}
<br>
.item2 {
background-color: #4caf50;
}
<br>
.item3 {
background-color: #2196f3;
}
<br>
.item4 {
background-color: #ff9800;
}
<br>
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}

在上面的示例中，我們使用@media查詢來設置在頁面寬度小于768px時，將2×2布局改為1列。通過設置grid-template-columns為1fr，grid-template-rows為auto，實現自適應的布局。
這個示例展示了如何使用CSS的媒體查詢來實現響應式的2×2布局，使得布局能夠根據不同設備和屏幕的尺寸自動適應。
通過以上的案例示例，我們可以清楚地了解到2×2 div布局的用法和實現方式。無論是簡單的靜態布局還是響應式的布局，2×2 div布局都能夠提供一種清晰和有序的布局方式，使得網頁內容更加易于閱讀和導航。希望本文對理解和使用2×2 div布局有所幫助。