CSS正方形DIV是Web開發中常用的一個特效，它可以讓一個矩形DIV變成正方形。下面是一個簡單的實現方法：

.square{
width: 100px;
height: 0;
padding-bottom: 100%;
/*使用padding-bottom百分比來撐開高度，實現寬高相等的效果*/
background-color: #ccc;
}

以上代碼中，我們先設置了一個長方形的DIV，然后通過設置padding-bottom為100%來撐開高度，讓矩形變成正方形。需要注意的是，在使用padding-bottom的時候，要設置一個確定的寬度，否則會出現寬度不確定的問題。

如果我們有多個正方形DIV，可以通過使用嵌套的方式，來實現自適應寬度的效果：

.container{
display: flex;
flex-wrap: wrap;
}
.square{
width: calc(33.33% - 10px);
/*減去margin的寬度*/
height: 0;
padding-bottom: calc(33.33% - 10px);
/*減去margin的高度*/
margin: 5px;
background-color: #ccc;
}

以上代碼中，我們使用了flex布局，并設置了flex-wrap為wrap，讓容器自動換行。然后通過設置正方形的寬度和高度為33.33%（減去margin的寬度和高度），實現了自適應寬度的效果。

總結一下，通過設置padding-bottom為百分比，可以讓矩形DIV變成正方形。如果有多個正方形DIV，可以使用嵌套的方式，設置自適應寬度。