CSS3是一種樣式表語言，可以用來控制網(wǎng)頁的表現(xiàn)和布局。其中布局部分是制作網(wǎng)頁必不可少的一部分。以下是CSS3常見布局的介紹。

/* 1. 兩列布局 */
.container {
display: flex;
}
.left {
width: 30%;
}
.right {
flex-grow: 1;
}
/* 2. 三列布局 */
.container {
display: flex;
}
.left {
flex: 0 0 200px;
}
.middle {
flex-grow: 1;
}
.right {
flex: 0 0 200px;
}
/* 3. 多列布局 */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.item {
grid-column: span 2; /* 每行占2個單元格 */
}
/* 4. 響應(yīng)式布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: calc(33.33% - 20px); /* 保證每行3個元素間有間距 */
margin: 10px;
}
@media (max-width: 768px) {
/* 手機屏幕下每行2個元素 */
.item {
flex-basis: calc(50% - 20px);
}
}
/* 5. 圣杯布局 */
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
.left {
flex: 0 0 200px;
margin-right: 20px;
}
.middle {
flex-grow: 1;
margin-right: 20px;
margin-left: 20px;
}
.right {
flex: 0 0 200px;
margin-left: 20px;
}
@media (max-width: 768px) {
/* 手機屏幕下順序改變 */
.container {
flex-direction: column;
}
.left, .right, .middle {
margin: 0;
}
.middle {
order: 1;
}
.left {
order: 2;
}
.right {
order: 3;
}
}

以上是CSS3常見布局的介紹和實現(xiàn)代碼。其中，兩列布局和三列布局可以使用flexbox實現(xiàn)；多列布局則可以使用grid布局實現(xiàn)；響應(yīng)式布局可以使用媒體查詢實現(xiàn)；而圣杯布局則是以上布局的結(jié)合體，可以應(yīng)對多種情況。