5.1 屬性 grid-auto-rows
CSS Grid Layout 提供了很好的工具來自動在網格中放置元素。屬性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 幫助管理 未明確放置在網格中的元素的行為。讓我們更詳細地看看這些屬性。
grid-auto-rows屬性定義了當元素超出明確指定的行時，自動添加的行的高度。
語法：
.grid-container {
grid-auto-rows: value;
}
這裡:
-
value: 自動添加行的高度。可以在不同的單位中指定 (px,%,fr,auto, 等等)
範例 1: 固定行高
在這個例子中，所有自動添加的行都將具有固定高度 100px：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三個等寬的列 */
grid-auto-rows: 100px; /* 自動添加的行將為 100px 高 */
}
範例 2: 彈性行高
在這個例子中，自動添加的行將具有最小高度 100px，但可以在需要時增加：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* 行的最小高度為 100px，可自動增加 */
}
5.2 屬性 grid-auto-columns
grid-auto-columns屬性定義了當元素超出明確指定的列時，自動添加的列的寬度。
語法：
.grid-container {
grid-auto-columns: value;
}
這裡:
-
value: 自動添加列的寬度。可以在不同的單位中指定 (px,%,fr,auto, 等等)
範例 1: 固定列寬
在這個例子中，所有自動添加的列都將具有固定寬度 100px：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 三個固定高度的行 */
grid-auto-columns: 100px; /* 自動添加的列將為 100px 寬 */
}
範例 2: 彈性列寬
在這個例子中，自動添加的列將具有最小寬度 100px，但可以增加到一個自由空間部分：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* 列的最小寬度為 100px，可增加到一個自由空間部分 */
}
5.3 屬性 grid-auto-flow
grid-auto-flow屬性定義了如何自動布局未明確通過grid-row和grid-column屬性指定的元素。
語法：
.grid-container {
grid-auto-flow: value;
}
這裡:
value: 決定元素布局順序的值。可能值：
row(默認): 元素按行布局column: 元素按列布局dense: 元素以緊密填充布局，沒有空單元（與row或column一起使用）
範例 1: 按行布局
在這個例子中，元素將按行布局，一行接一行地填充：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* 元素按行布局 */
}
範例 2: 按列布局
在這個例子中，元素將按列布局，一列接一列地填充：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* 元素按列布局 */
}
範例 3: 緊密填充
在這個例子中，元素將以緊密填充的方式按行布局，以最小化空單元格的數量：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* 元素按行以緊密填充進行布局 */
}
5.4 完整實現範例
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三個等寬的列 */
grid-auto-rows: 100px; /* 自動添加的行將為 100px 高 */
grid-auto-flow: row dense; /* 元素按行以緊密填充進行布局 */
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 自動布局範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
<div class="grid-item">元素 5</div>
<div class="grid-item">元素 6</div>
</div>
</body>
</html>
代碼解釋：
-
.grid-container: 創建一個具有三個等寬列和自動行高為100px的Grid容器。 元素以緊密填充按行布局 -
.grid-item: 定義網格元素的基本樣式，如背景色、文本顏色、內邊距、 文本居中和邊框
GO TO FULL VERSION