CSS自適應正方形宮格布局是一種非常實用的布局方式，可以讓我們輕松地實現頁面上的宮格布局，而且還能讓宮格自適應屏幕大小，以達到更好的視覺效果。下面我們來看一下如何實現這種布局。

.grid-item {
position: relative;
width: 25%; /* 四列布局 */
padding-bottom: 25%; /* 保證宮格的寬高比為1:1 */
float: left;
}
.grid-item > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f2f2f2; /* 宮格的背景顏色 */
text-align: center;
padding: 20px;
box-sizing: border-box; /* 讓padding不會撐大宮格 */
}

通過上面的代碼，我們定義了一個.grid-item的類，代表一個宮格。我們設置了它的寬度為25%并且用padding-bottom來保證宮格的寬高比為1:1，使其成為一個正方形。然后我們再讓它浮動到左側，就能夠實現四列布局。

接下來我們讓.grid-item中的子元素.absolute定位，并且四周占滿整個宮格，這樣它就能夠覆蓋整個宮格。我們還設置了宮格的背景顏色、文字居中和padding，使其更美觀。

最后，我們把所有.grid-item放到一個容器中，就能夠實現一個自適應的宮格布局了。

<div class="grid-container">
<div class="grid-item">
<div>宮格1</div>
</div>
<div class="grid-item">
<div>宮格2</div>
</div>
<div class="grid-item">
<div>宮格3</div>
</div>
<div class="grid-item">
<div>宮格4</div>
</div>
</div>

以上就是關于CSS自適應正方形宮格布局的內容介紹了。我們可以根據實際需求來設置宮格的寬度和數量，以達到更好的效果。