CSS Grid 布局：属性及使用详解
- 一、CSS Grid 布局的基础概念
- 二、主要的 CSS Grid 属性
- 1、`display: grid` / `display: inline-grid`声明 Grid 容器
- 2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸
- 3、 `grid-template-areas`命名布局区域
- 4、`gap`/ `grid-gap` 设置网格项之间的间距
- 5、`grid-column` / `grid-row`：控制元素在 Grid 中的定位
- 6、 `justify-items` / `align-items`：控制Grid项的对齐
- 7、`justify-content` / `align-content`控制整个 Grid 容器的对齐
- 三、常见的 Grid 布局设计
- 1、简单的 2 列布局
- 2、 定制化的页面布局
- 四、总结
CSS Grid 布局是一个强大的二维布局系统，它使得网页开发中的布局工作更加简洁和高效。Grid 布局可以同时处理水平和垂直方向的排列，允许开发者轻松地设计复杂的网页布局。
一、CSS Grid 布局的基础概念
Grid 布局由两部分组成：
- Grid 容器（Grid Container）：通过给元素设置
display: grid或display: inline-grid来创建一个 Grid 容器。所有直接子元素将成为 Grid 项目。 - Grid 项目（Grid Items）：Grid 容器内的直接子元素。
二、主要的 CSS Grid 属性
1、display: grid / display: inline-grid声明 Grid 容器
- 作用：用于声明一个元素为 Grid 容器，
display: grid会让元素成为块级 Grid 容器，display: inline-grid会让元素成为内联 Grid 容器。 - 使用方法：
.container {display: grid;
}
2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸
- 作用：定义 Grid 容器中列和行的尺寸。
grid-template-columns设置列的宽度。grid-template-rows设置行的高度。
- 语法：你可以指定多个尺寸，使用空格分开，或者使用
repeat()函数来简化代码。
示例：
.container {display: grid;grid-template-columns: 200px 1fr 100px;/* 200px：第一列宽度为 200px,1fr：第二列的宽度占剩余空间,100px：第三列宽度为 100px。 */grid-template-rows: 50px auto;/* 50px：第一行高度为 50px,auto：第二行的高度由内容决定。 */
}
效果：
3、 grid-template-areas命名布局区域
- 作用：使用名称化的布局，将 Grid 项目放置在命名的区域内。
- 通过命名区域来控制 Grid 项目的位置。
- 每个区域可以由多个行或列组成，但必须由名称指定。
- 这种方法可以让布局更直观、易于维护，也能让 HTML 和 CSS 之间的关系更加明确。
- 语法：
grid-template-areas是一个由多个字符串组成的属性，每个字符串代表 一行。而在每个字符串中，空格分隔的每个部分代表 一列，这些部分的顺序决定了每个区域在 Grid 容器中的位置。- 结构： 区域名称可以是你自定义的字符串，它们将用于对应的 grid-area 属性来定位元素。
grid-template-areas: "区域1 区域2 区域3""区域4 区域5 区域6""区域7 区域8 区域9"; - 在子元素样式中添加grid-area 属性来定位元素
- 结构： 区域名称可以是你自定义的字符串，它们将用于对应的 grid-area 属性来定位元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><header>Header</header><main>Main Content</main><aside>Sidebar</aside><footer>Footer</footer></div>
</body>
</html>
/* 创建 Grid 容器 */
.container {display: grid;grid-template-columns: 1fr 3fr; /* 两列布局，第一列占 1fr，第二列占 3fr */grid-template-rows: auto 1fr auto; /* 三行布局，第一行和第三行自适应高度，第二行占满剩余空间 */grid-template-areas: "header header" /* header 跨越两列 */"sidebar main" /* sidebar 在第一列，main 在第二列 */"footer footer"; /* footer 跨越两列 */gap: 20px; /* 设置行间距和列间距 */
}/* 分配每个区域的元素 */
header {grid-area: header;background-color: #f8f8f8;padding: 20px;text-align: center;
}main {grid-area: main;background-color: #e0e0e0;padding: 20px;
}aside {grid-area: sidebar;background-color: #d0d0d0;padding: 20px;
}footer {grid-area: footer;background-color: #b0b0b0;padding: 20px;text-align: center;
}
效果：
4、gap/ grid-gap 设置网格项之间的间距
gap（现在的标准）和grid-gap（在较老的浏览器中使用）属性用于设置网格（Grid）项之间的间距。它们可以单独设置行间距（行与行之间的距离）和列间距（列与列之间的距离），也可以同时设置行间距和列间距。
- 作用：定义 Grid 项目之间的间距，可以同时设置行间距和列间距，或者单独设置。
- 语法：
gap: <row-gap> <column-gap>;<row-gap>：设置行间距（行与行之间的间距）。<column-gap>：设置列间距（列与列之间的间距）。- 如果只设置一个值，则
row-gap和column-gap都使用该值。
注意事项：
gap属性适用于 Grid 布局 和 Flex 布局，所以它不仅能控制 Grid 容器项之间的间距，也适用于 Flex 容器中的项。- 在较老的浏览器中，
gap可能不被支持（例如 Internet Explorer），但现代浏览器都已经广泛支持该属性。
5、grid-column / grid-row：控制元素在 Grid 中的定位
- 作用：控制 Grid 项目在行和列上的位置和跨度。
grid-column用于定义一个元素在 水平（列） 方向上的起始和结束位置。它指定了元素从哪个列开始，跨越多少列。它是一个简写属性，将grid-column-start和grid-column-end结合在一起grid-row用于定义一个元素在 垂直（行） 方向上的起始和结束位置。它指定了元素从哪一行开始，跨越多少行。同样是一个简写属性，它将grid-row-start和grid-row-end结合在一起
- 语法：
grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>;
实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px 50px;gap: 10px;}.item1 {grid-column: 1 / 2; /* 从第1列开始，到第2列结束 */grid-row: 1 / 2; /* 从第1行开始，到第2行结束 */background-color: lightblue;}.item2 {grid-column: 2 / 4; /* 从第2列开始，到第4列结束 */grid-row: 1 / 3; /* 从第1行开始，到第3行结束 */background-color: lightcoral;}.item3 {grid-column: 1 / 2; /* 从第1列开始，到第2列结束 */grid-row: 3 / 4; /* 从第3行开始，到第4行结束 */background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="item1">Item 1</div><div class="item2">Item 2</div><div class="item3">Item 3</div>
</div>
</body>
</html>
效果：
6、 justify-items / align-items：控制Grid项的对齐
在 CSS Grid 布局中，justify-items 和 align-items 是两个重要的对齐属性，用于控制网格项在主轴和交叉轴上的对齐方式。
-
作用：控制 Grid 项目在 Grid 单元格中的对齐方式。
justify-items：控制项目在水平轴上的对齐，它影响的是每个网格项相对于其所在单元格的对齐方式，而不是整个Grid 容器本身的对齐方式。align-items：控制项目在垂直轴上的对齐，同样，它影响的是每个网格项相对于其所在单元格的对齐方式。
-
语法：
justify-items: <alignment>;/* start：网格项对齐到网格单元格的开始边缘 end：网格项对齐到网格单元格的结束边缘center 网格项在网格单元格中居中对齐stretch 网格项拉伸填满整个网格单元格（这是默认值）*/ align-items: <alignment>; /* start：网格项对齐到网格单元格的顶部边缘 end：网格项对齐到网格单元格的底部边缘center 网格项在网格单元格中垂直居中对齐stretch 网格项拉伸填满整个网格单元格（这是默认值）*/
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: center; /* 水平居中对齐每个网格项 */align-items: center; /* 垂直居中对齐每个网格项 */gap: 10px; /* 网格项之间的间距 */}.item {background-color: lightgreen;padding: 20px;}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div><div class="item">Item 6</div>
</div></body>
</html>
效果：
注意事项：与 justify-content 和 align-content 的区别
justify-items 和 align-items 是用于对齐网格项在各自单元格中的位置。而 justify-content 和 align-content 是用于对齐整个 Grid 容器中的内容。
7、justify-content / align-content控制整个 Grid 容器的对齐
-
作用：控制整个 Grid 容器内的项目如何在容器中对齐。
justify-content：控制整个 Grid 容器中网格项在水平方向（主轴）上的对齐方式。这个属性影响的是整个容器的网格内容，而不是单个网格项。align-content：控制整个 Grid 容器中网格项在垂直方向（交叉轴）上的对齐方式。同样也只影响整个容器的网格内容。
-
语法：
justify-items: <alignment>;/* start：将网格内容对齐到容器的起始边缘end：将网格内容对齐到容器的结束边缘center 将网格内容水平居中对齐stretch 将网格内容拉伸以填充整个容器（默认值）space-between 在网格项之间平均分配空白，首尾项紧贴容器边缘space-around 在网格项之间平均分配空白，网格项两侧都有相等的空间space-evenly 在网格项之间平均分配空白，每个网格项之间的间距都相等*/ align-items: <alignment>;/* start：将网格内容对齐到容器的顶部end：将网格内容对齐到容器的底部center 将网格内容垂直居中对齐stretch 将网格内容拉伸以填充整个容器（默认值）space-between 在网格项之间平均分配垂直空白，首尾项紧贴容器的顶部和底部space-around 在网格项之间平均分配垂直空白，网格项的上下都有相等的空间space-evenly 在网格项之间平均分配垂直空白，每个网格项之间的间距都相等*/ -
使用场景：
- 当网格项的总宽度或高度小于容器的宽度或高度时，justify-content 和 align-content 可以用来控制整个网格内容在容器中的对齐位置。
- 在有间距的情况下，它们可以用于控制网格项之间的空隙分配和对齐。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: center; /* 水平居中对齐整个网格 */align-content: center; /* 垂直居中对齐整个网格 */gap: 10px; /* 网格项之间的间距 */height: 500px; /* 设置容器高度 */}.item {background-color: lightcoral;padding: 10px;}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div><div class="item">Item 6</div>
</div></body>
</html>
效果：
三、常见的 Grid 布局设计
1、简单的 2 列布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>.container {display: grid;grid-template-columns: 3fr 1fr;grid-gap: 20px;height: 500px;}.main {background-color: aqua}.sidebar {background-color: blueviolet}</style>
</head><body><div class="container"><div class="main">Main content</div><div class="sidebar">Sidebar</div></div></body>
</html>
效果：
2、 定制化的页面布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>.container {display: grid;height: 300px;grid-template-columns: 1fr 3fr;grid-template-rows: auto 1fr auto;grid-template-areas:"header header""sidebar main""footer footer";}header {grid-area: header;background-color: aqua}main {grid-area: main;background-color: cornflowerblue}aside {grid-area: sidebar;background-color: chocolate}footer {grid-area: footer;background-color: darkkhaki}</style>
</head><body><div class="container"><header>Header</header><main>Main Content</main><aside>Sidebar</aside><footer>Footer</footer></div></body>
</html>
效果：
四、总结
CSS Grid 布局是现代网页设计中的重要工具，它允许开发者创建复杂的布局结构，且不需要借助浮动或复杂的定位技巧。Grid 布局的核心在于将页面区域分成“行”和“列”，并通过指定项的跨度与位置来控制布局。理解 CSS Grid 的基础概念和属性是掌握这一布局方法的第一步。
