目前主要的布局CSS有兩種：盒子模型（Box Model）和CSS Grid Layout。

盒子模型:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}

盒子模型通過(guò)將元素看作一個(gè)盒子來(lái)實(shí)現(xiàn)布局。盒子由內(nèi)部?jī)?nèi)容、內(nèi)邊距、邊框和外邊距組成，這些屬性都可以被控制，以實(shí)現(xiàn)不同的布局效果。盒子模型適用于許多設(shè)計(jì)場(chǎng)景，例如居中、浮動(dòng)和響應(yīng)式設(shè)計(jì)。

CSS Grid Layout:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}

CSS Grid Layout 是一個(gè)相對(duì)較新的布局方法，旨在更好地處理復(fù)雜的網(wǎng)格布局。它允許您以網(wǎng)格形式建立布局，可以在網(wǎng)格中自由地定義列和行。與盒子模型相比，它具有更強(qiáng)的伸縮性和精度。CSS Grid Layout 通常適用于需要精確控制的頁(yè)面或應(yīng)用程序（例如，Dashboards或Web應(yīng)用程序）。