圣杯布局是一種非常經(jīng)典的三欄布局，其中主要內(nèi)容位于中間列，并且可以自適應(yīng)寬度。這樣既能充分利用視覺空間，同時(shí)又避免了內(nèi)容太寬導(dǎo)致頁面排版混亂的問題。

下面是如何使用CSS來實(shí)現(xiàn)圣杯布局。

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 auto;
width: 100%;
max-width: 1200px;
}
.main {
flex: 1;
order: 2;
}
.left,
.right {
flex-basis: 200px;
order: 1;
}
.left {
margin-left: -200px;
}
.right {
margin-right: -200px;
}

在這個(gè)例子中，我們使用了flex布局來實(shí)現(xiàn)圣杯布局。我們?cè)O(shè)置了一個(gè)名為.container的容器，用于包含三列，其中中間列使用了flex:1來讓它占據(jù)所有剩余的空間。

左右兩列使用了flex-basis來設(shè)置寬度，并且使用了order屬性來調(diào)整它們的順序。為了讓左右兩列不會(huì)擠壓中間列，我們使用了負(fù)邊距來把它們移動(dòng)到容器的邊緣。

這種布局非常常見，因此很多框架和庫都提供了特定的圣杯布局組件。但是如果你理解了它的基本原理，你也可以很容易地手動(dòng)實(shí)現(xiàn)一種自定義的三欄布局。