CSS 大神對于網站布局的設置非常重要。他們能夠利用一些神奇的技巧，讓頁面看起來更加優美、更加舒適。大神可以靈活運用 div、float、position 等屬性，來創建各種各樣的布局樣式。

/* flexbox 布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
margin-bottom: 20px;
}
/* grid 布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.item {
height: 200px;
}
/* 圣杯布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.main {
flex-basis: calc(70% - 20px);
}
.left,
.right {
flex-basis: calc(15% - 20px);
}
/* 響應式布局 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

以上就是幾種比較常見的 CSS 布局樣式，大神們可以根據項目需求任意組合使用。但是一定要注意頁面響應式布局，保證在不同分辨率設備上都擁有良好的展示效果。