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-rows`Grid 容器中列和行的尺寸

作用：定义 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 属性来定位元素

示例：

<!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>