3.1 属性 grid-template-columns
CSS Grid Layout 允许你用行和列来创建复杂的网页布局。两个关键属性用来定义grid的结构 — grid-template-rows 和 grid-template-columns。
这些属性让你可以设置grid容器中行和列的数量和大小，这样开发者就能完全控制元素的布局。
属性 grid-template-columns 定义了grid中列的数量和大小。它可以接受一个或多个值，这些值可以用多种单位表示，比如像素（px）、百分比（%）、弹性单位（fr），等等。
例子 1: 设置固定列宽
在这个例子中，grid会由三列组成。第一列宽度为 100px，第二列宽度为 200px，第三列宽度为 100px：
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 三列固定的宽度 */
}
例子 2: 使用弹性单位 (fr)
在这个例子中，grid将由三列组成。第一和第三列将占据相同的空间，而第二列将是它们的两倍宽：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列弹性宽度 */
}
例子 3: 使用重复 (repeat)
在这个例子中使用 repeat 函数，简化代码。grid将由三列同等宽度组成：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三个相等的列 */
}
例子 4: 设置最小和最大尺寸 (minmax)
在这个例子中，每个三列将有最小宽度 100px，且弹性尺寸可以增大到 1fr，这取决于可用空间：
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 三列最小宽度 100px 和弹性尺寸 */
}
3.2 属性 grid-template-rows
属性 grid-template-rows 类似于 grid-template-columns，但它定义了grid中行的数量和大小。它也可以接受一个或多个值，这些值可以用多种单位表示。
例子 1: 设置固定行高
在这个例子中，grid将由三行组成。第一行高度为 50px，第二行高度为 100px，第三行高度为 50px：
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* 三行固定高度 */
}
例子 2: 使用弹性单位 (fr)
在这个例子中，grid将由三行组成。第一和第三行将占据相同的空间，而第二行会是它们的两倍高：
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* 三行弹性高度 */
}
例子 3: 使用重复 (repeat)
在这个例子中用 repeat 函数简化代码。grid将由三行同等高度组成：
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 三个相等的行 */
}
例子 4: 设置最小和最大尺寸 (minmax)
在这个例子中，每个三行将有最小高度 50px，且弹性尺寸可以增大到 1fr，这取决于可用空间：
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* 三行最小高度 50px 和弹性尺寸 */
}
3.3 属性组合
组合 grid-template-rows 和 grid-template-columns 属性
这些属性可以结合起来使用，以创建具有不同行列尺寸的复杂grid。
在这个例子中，grid将由两列组成：第一列占据1份可用空间，第二列占据2份。grid还会有两行：第一行高度为 100px，第二行高度为 200px。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
完整实现例子：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!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>
</body>
</html>
代码说明：
.grid-container: 定义grid的容器，具有两列和两行。用gap属性设置元素之间的间隔.grid-item: 定义grid元素的基本样式，比如背景色、文本颜色、填充、文本居中和边框
GO TO FULL VERSION