div css页面布局 模板_前端 CSS Grid 网格布局指南「上」

引言

CSS Grid 非常强大，它相比传统的布局方式非常灵活，允许在 Web 上创建二维布局。CSS Grid 的出现，使 Web 页面的设计更加容易，您不必再使用浮动和定位处理页面上的元素。

认识 CSS Grid

CSS Grid 布局，译为 “网格布局” ，顾名思义，它将容器划分为 “行” 和 “列” ，行和列交叉部分形成单元格，这些单元格就是在页面上显示的主要目标。

在 HTML 中实现 CSS Grid 布局，需要一个父级元素包含 N 个子级元素，然后分别在它们的 CSS 代码中设置相应属性。

所以可以把父级元素叫做 “容器” ，子级元素叫做 “项” ，例如下面的 HTML 包含了 1 个 container 容器和 6 个 item 项：

1

2

3

4

5

6

为练习方便，将 CSS 独立成文件，然后在 HTML 页面中引用它：

新建一个 style-01.css 文件，添加 CSS 代码，让页面元素看起来更明显：

.item { /*  * 内部文字居中的作用  * 不是本篇文章的 grid  * 注意区分  */  display: flex;  align-items: center;  justify-content: center;  border: 1px solid #ddd;  font-size: 2em;}.item-1 {  background-color: #BFEFFF;}.item-2 {  background-color: #BFEFFF;}.item-3 {  background-color: #FFDFBF;}.item-4 {  background-color: #FFDFBF;}.item-5 {  background-color: #FFDFBF;}.item-6 {  background-color: #FFDFBF;}

正如您无所见，没有什么特别的样式，显示效果是这样的：

要实现下图的布局，就可以采用 CSS Grid ：

首先可以将整体分隔成一个网格模型来思考，就像下面这样：

这个网格共有 2 行 6 列，一个 12 个单元格，“列” 由垂直网格线分隔，标记为 M ， “行” 由水平网格线分隔，标记为 N 。由水平和垂直网格线交叉形成的区域叫单元格，例如 c 图，是一个单元格，a 图和 b 图则分别由 4 个单元格合并组成。

数一数，水平和垂直网格线的条数分别为 M + 1 和 N + 1 条。

关于网格的概念，您可以暂时就了解这么多。

上面的图例，可以先根据网格的特性，将布局想象成一个对应的模板：

a a b b c da a b b e f

有了这个模板就方便了，直接将它放到 CSS 代码中是个不错的想法，现在继续修改 CSS 代码：

.container {  display: grid;  grid-template-columns: 50px 50px 50px 50px 50px 50px;  grid-template-rows: 50px 50px;  gap: 5px 5px;  grid-template-areas: "a a b b c d"                       "a a b b e f";}.item {  display: flex;  align-items: center;  justify-content: center;  /*   * 让内部文字居中作用   * 不是本篇文章的 grid   * 注意区分   */  border: 1px solid #ddd;  font-size: 2em;}.item-1 {  grid-area: a;  background-color: #BFEFFF;}.item-2 {  grid-area: b;  background-color: #BFEFFF;}.item-3 {  grid-area: c;  background-color: #FFDFBF;}.item-4 {  grid-area: d;  background-color: #FFDFBF;}.item-5 {  grid-area: e;  background-color: #FFDFBF;}.item-6 {  grid-area: f;  background-color: #FFDFBF;}

上面的 CSS 代码，只关注 .container 和 .item-1 -- .item-6 。

.container 中，模板被放置到了一个 CSS 属性中 。这非常棒。

来看一下现在的效果：

通过示例，可以看到 Grid 布局真的很强大。

现在遇到了点新东西，使一个容器呈现网格布局，首先要做的是将容器的 display 属性设置为 grid ，或 inline-grid 。

display: grid | inline-grid

• grid ：生成一个块级网格布局。
• inline-grid ：生成一个行内网格布局。

inline-grid ，对外部的行内元素有影响。容器是一个 div ，宽度默认是浏览器的宽度，它占据整个一行，如果在容器外放置一个行内元素，行内元素也不会紧跟在容器后面，例如在 container 容器前后分别加上一个 span ，页面是这样的：

将 CSS 代码的 display 属性设置成 inline-grid ：

// CSS 代码.container {  display: inline-grid;  ...}// html 代码Before

...

After

现在容器变成了行内元素：

在 .container 和 .item-x 中还有几个属性：

// 应用于容器grid-template-columns: 50px 50px 50px 50px 50px 50px;grid-template-rows: 50px 50px;gap: 5px 5px;grid-template-areas: "a a b b c d"                     "a a b b e f";

用于容器的属性：

• grid-template-columns ：定义了每一列的 “列宽” ，上面的示例一共有 6 列，每列宽度为 50 像素。
• grid-template-rows ：定义了每一行的 “行高”，上面的示例一共有 2 行，每行高度为 50 像素。
• gap ：设置行和列间距，行间距在前，列间距在后，如果省略了第 2 个值，列宽和行高都是第 1 个值。
• grid-template-areas ：通过 “引用 ‘项’ 的 grid-area 属性指定的网格区域的名称” 来定义网格模板。重复网格区域的名称将导致内容横跨这些单元格。就像示例中的 "a a" ，它将两个单元格合并了，而并不是重复显示一个单元格中的内容。grid-template-areas 语法本身提供了网格结构的可视化。

用于项的属性：

/* 应用于项 */grid-area: a;...

• grid-area ：为项指定名称，以便使用 grid-template-areas 属性创建的模板可以引用该项。它还有其它用法，但先暂时了解这么多。

总结

由于需要总结的东西比较多，为了降低读者的阅读时间成本，关于《前端 CSS Grid 网格布局指南》的系列文章将会分期发布。

本文先认识一下 CSS Grid ，看看它到底是何方神圣。

基本概念：

• CSS Grid 将容器划分为 “列” 和 “行” ，“列” 由垂直网格线分隔，“行” 由水平网格线分隔。
• 要是实现 CSS Grid 布局，需要一个包含项的容器，同时分别在它们的 CSS 代码中设置相关的属性。
• 在 HTML 中父级元素叫做容器，子级元素叫做项。
• 使一个容器呈现网格布局，首先要将容器的 display 属性设置为 grid ，或 inline-grid 。

容器属性：

• grid-template-columns ：定义了每一列的 “列宽” 。
• grid-template-rows ：定义了每一行的 “行高”。
• gap ：设置行和列间距。
• grid-template-areas ：通过 “引用 ‘项’ 的 grid-area 属性指定的网格区域的名称” 来定义网格模板。

项属性：

• grid-area ：为项指定名称，以便使用 grid-template-areas 属性创建的模板可以引用该项。

文章中图片来源于网络，若有侵权行为，请在后台与我联系。