CSS方格圖是前端開發(fā)中常用的布局方式之一，其通過CSS中的grid屬性來實(shí)現(xiàn)。grid屬性是CSS3的新特性，在實(shí)現(xiàn)方格布局時(shí)具有很強(qiáng)的靈活性和可擴(kuò)展性，可根據(jù)需要隨意調(diào)整方格大小、間距以及對(duì)齊方式。

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
background-color: #F5D0C6;
border: 1px solid #BDBDBD;
text-align: center;
padding: 10px;
}

上述代碼中，.grid-container元素作為方格容器，通過display屬性設(shè)置為grid來使用grid屬性。其中，grid-template-columns屬性設(shè)置了方格的列數(shù)和寬度，repeat函數(shù)的第一個(gè)參數(shù)表示重復(fù)的次數(shù)，第二個(gè)參數(shù)表示每個(gè)重復(fù)的元素的大小。grid-gap屬性表示方格之間的間距，grid-auto-rows屬性表示自動(dòng)調(diào)整方格的高度。而.grid-item元素則表示單個(gè)方格的樣式，其中設(shè)置了背景顏色、邊框、對(duì)齊方式和內(nèi)邊距。

通過上述代碼，就可以實(shí)現(xiàn)一個(gè)具有3列的方格布局，每個(gè)方格之間有10像素的邊距，并且方格的高度會(huì)隨內(nèi)容的增加而自動(dòng)調(diào)整。在實(shí)際應(yīng)用中，可以通過使用不同的CSS屬性以及JavaScript來實(shí)現(xiàn)更加靈活和多樣化的方格布局。