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: 创建了一个Grid容器，有三个等宽的列和自动高度为100px的行。 元素按行密集布局 -
.grid-item: 定义了网格元素的基本样式，比如背景色、文字颜色、填充、文本居中和边框
GO TO FULL VERSION