在網(wǎng)頁設(shè)計(jì)中，使用CSS進(jìn)行多行布局是非常常見的操作。多行布局可以使內(nèi)容更好地呈現(xiàn)，讓頁面更加美觀實(shí)用。本文將介紹一些CSS多行布局的技巧。

/* 示例1: flex布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 30%;
margin: 10px;
}

示例1使用了flex布局，可以讓容器自動適應(yīng)不同的屏幕大小和設(shè)備尺寸，非常靈活。flex-wrap屬性可以讓項(xiàng)目在一行排不下時(shí)自動換行。而且item元素的寬度也是自適應(yīng)的，可以根據(jù)實(shí)際情況調(diào)整比例。

/* 示例2: grid布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 20px;
}
.item {
grid-column: span 1;
grid-row: span 1;
}

示例2使用了grid布局，同樣也可以自動適應(yīng)不同的屏幕大小和設(shè)備尺寸。grid-template-columns屬性可以讓布局把寬度分成若干列。grid-gap屬性可以讓item元素之間留出一些空隙，使得整個(gè)頁面更加美觀。

/* 示例3: column-count布局 */
.container {
column-count: 3;
column-gap: 20px;
}
.item {
break-inside: avoid;
}

示例3使用了column-count布局，可以讓內(nèi)容分成多列展示。column-gap屬性可以讓列之間留出一些空隙。break-inside屬性可以防止item元素被分割到兩列之間。

以上三個(gè)示例是常用的CSS多行布局方式，可以根據(jù)不同的需求選擇合適的方式進(jìn)行布局。