在網頁設計中，布局一直是一個比較重要的部分，尤其是在移動端瀏覽器中，布局要考慮到適配不同的設備尺寸。CSS3作為前端開發的重要技術之一，提供了許多新的布局方式。下面介紹一些常見的CSS3布局案例。

.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
flex-basis: 30%;
}
@media screen and (max-width: 768px) {
.flex-item {
flex-basis: 45%;
}
}
@media screen and (max-width: 480px) {
.flex-item {
flex-basis: 100%;
}
}

Flexbox布局是CSS3新增的一種彈性布局方式，可以指定容器的排列方式、對齊方式、空間分配等。上面的代碼是一個實現響應式網格布局的例子，通過定義一個.flex-container容器，并設置display: flex;實現其內部的flex布局。為每個子元素(.flex-item)設置flex-basis的百分比，可以按比例劃分子元素的寬度。通過@media媒體查詢，可以使布局在不同的屏幕寬度下表現不同，從而適配不同的設備尺寸。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
row-gap: 20px;
column-gap: 20px;
}
.item {
grid-row: span 1;
grid-column: span 1;
}
.item-3 {
grid-column: span 3;
}
.item-2 {
grid-row: span 2;
}

另一個CSS3布局方式是Grid布局，也是通過對容器進行布局的方式，并且也支持響應式設計。上面的例子定義了一個.container容器，并設置display: grid;使其采用Grid布局。通過grid-template-columns和grid-template-rows可以指定子元素的排列方式。設置row-gap和column-gap可以調整元素之間的空隙。對于每個子元素，可以利用grid-row和grid-column指定元素在Grid中的位置，通過設置span屬性可以使一個元素跨越多個格子。上面的代碼可以實現一個6個元素的兩行三列布局，其中第一行為3個元素，第二行為2個元素，使第三個元素跨越3個格子，第4個元素跨越2個格子。