在前端開發中，布局是關鍵的一環。合理的布局不僅可以讓網頁的UI更加美觀，而且也能使用戶更加舒適地使用網站或應用程序。下面我們將介紹一些國外經典的CSS布局案例，幫助廣大前端開發者更好地理解和掌握CSS布局技巧。 第一個案例是“圣杯布局”(the Holy Grail Layout)，這是一種三列布局，其中左右兩列為固定寬度，中間列自適應寬度，該布局既支持左右列在前，也支持右左列在前。下面是圣杯布局的CSS代碼：

.grail {
display: table;
width: 100%;
}
.grail .column {
float: left;
width: 33.33%;
}
.grail .main {
margin: 0 17%;
}
.grail .left {
margin-left: -33.33%;
}
.grail .right {
margin-left: -17%;
}

第二個案例是“雙飛翼布局”(the Double Wings Layout)，它與圣杯布局類似，也是三列布局，但它將中間列放到了最前面，在左右兩列之間留出了空白。下面是雙飛翼布局的CSS代碼：

.doublewings {
display: table;
width: 100%;
}
.doublewings .column {
float: left;
}
.doublewings .main {
margin: 0 17%;
}
.doublewings .left {
width: 17%;
margin-left: -100%;
}
.doublewings .right {
width: 17%;
margin-left: -17%;
}

第三個案例是“瀑布流布局”(the Waterfall Flow Layout)，這種布局一般用于圖片或文本等不規則的排版。下面是瀑布流布局的CSS代碼：

.waterfall {
column-count: 3;
column-gap: 10px;
}
.waterfall .item {
margin-bottom: 10px;
}

第四個案例是“彈性盒子布局”(the Flexbox Layout)，這種布局是目前最流行的布局方式之一，它用于解決傳統布局的很多問題，如有固定寬度的盒子在不同尺寸的屏幕上無法適應等。下面是彈性盒子布局的CSS代碼：

.flexbox {
display: flex;
justify-content: space-around;
align-items: center;
}
.flexbox .item {
flex: 1;
margin: 0 10px;
}

以上就是國外經典的CSS布局案例，這些布局都有自己的特點和適用范圍，我們可以根據需要選擇合適的布局方式進行頁面布局。同時，深入學習和掌握CSS布局技巧，也可以讓你的前端開發水平更上一層樓。