CSS實現圣杯布局是一個常見的技術，可以讓網站頁面的布局更加美觀、合理。圣杯布局是一種三列布局方式，其中左右兩列分別放置導航欄和廣告等，而中間則是主體內容，整體布局形如一把圣杯。

/* 圣杯布局樣式 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.main {
flex-grow: 1;
min-width: 0;
}
.sidebar {
flex-basis: 200px;
}
.left {
order: -1;
margin-right: 200px;
}
.right {
margin-left: 200px;
}

上述代碼中，.container為整個圣杯布局容器，使用了flex布局，并在左右兩邊各放置了一個.sidebar，即導航欄和廣告欄。主體內容則使用.main來實現，其設置了flex-grow: 1，表示在剩余空間中占據盡可能大的空間。同時，為了解決長文本換行問題，我們還設置了min-width: 0。

在左右兩邊.sidebar的實現上，我們使用了flex-basis: 200px來規定寬度，意為默認寬度為200px。而使用order: -1將左邊的導航欄順序提前，將其放置于主體內容之前。最后，將其與右側廣告.right之間的空隙使用margin來實現合理的布局。