CSS Grid布局的介绍

这里要提两个核心概念，这两个核心概念有点类似于Flexbox布局：

• Grid容器（对应Flexbox布局中的Flex容器）
• Grid项目（对应Flexbox布局中的Flex项目）
  

比如一个这样的HTML结构：

使用 CSS Grid布局首要的第一步，就是通过display:grid;来对容器声明一个网格容器，那么这个div元素里面对应的子元素就自动成为网格项目。

虽然你在div.grid-container中设置了display:grid;，声明了这个元素为Grid容器，但在浏览器中，并看不到有任何的变化。但在在幕后中，他们还是发生了变化，div.grid-container是一个Grid容器，他的所有子元素就自动变成了网格项目。

接下来，使用grid-template-columns: 1fr 1fr 1fr;来定义三列网格：

从gif图中就明显的看出来，现在有点变化了，颜色块变小了，但很难区分出有何变化，为了让效果之间有更突出的差异，再给.grid-container中添加grid-gap:5px：

看到变化了吧，整个网格分了三个列，单元格之间有5px的间距，同时每列的列宽是整个宽度的三分之一，那是因为我们采用了fr单位，而且把整个网格分成了三列，每列的宽度是1fr。这里告诉我们三个知识点：

• grid-template-columns用来把网格指定列的宽度
• grid-gap用来指定列（或行）的间距
• fr可以自动根据网格容器的宽度来计算列的宽度
  

现在我们把grid-template-columns的值改成：1fr 2fr 1fr，对应的效果就会变成：

现在第二列的宽度是第一列和最后一列的两倍。这也再次证明fr单位的强大之处，使用它可以让你很容易定义你的网格尺寸。

现在越来越接近我们想要的网格。但需求是不断变化的，比如我们现在想让顶部的第一行尽可能的宽，比如说跨整个网格列（比如我们网页的头部，或者说我们常见的导航）。如此一来，只需要在第一个网格上使用grid-column: 1 / 4：

或许第一次接触1 / 4会令你感到神秘，其实这个涉及到了CSS Grid中的重要概念之一，那就是网格线，其中第一个数字是列的起始网格线位置，第二个数字是线束网格线的位置。对于一个CSS Grid，可以通过grid-template-columns创建列网格线，grid-template-rows创建行网格线。这种方式创建的是一种显式的网格线。当然，除了这种方式，还可以创建隐式网格线。除此之外，还可以使用grid-auto-rows和grid-auto-columns可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图：

接下来，我们想要有一个300px的侧边栏高度，并且让他的位置是垂直方向的2 / 3。我们可以使用grid-row: 2 / 4来实现，这个特性和grid-column非常的类似。这个时候，效果变成这样：

其实CSS Grid看上去和表格非常的类似，在表格中我们有一个专业的术语，合并单元格。其实在CSS Grid布局中，我们同样有一个类似的特性，那就是在grid-column或者grid-row中引入关键词span，在关键词span后面紧跟一个数值，就是表示合并单元格的数量，先来看下图：

上面的示例中，我们使用到了grid-column: 2 / span 1和grid-row: 2 / span 2。其中grid-column: 2 / span 1表示从列网格线2开始，跨度是1个列网格线（其实就是合并一个列单元格）。而grid-row: 2 / span 2表示的是从行网格线2开始，跨度是两个两个线（其实就是合并两个行单元格）。

接着我们来做页脚，在做页脚之前，我们先删除两个网格项目，因为不需要他们了。做页脚和做页头非常的类似，继续使用grid-column: 1 / 4即可：

通过上面的方式，我们可以轻易的控制网格，也能非常容易的实现一个Web面页的布局，比如一个三列的布局。

点击查看更多精彩前端资源

点击有惊喜

CSS Grid布局的介绍

这里要提两个核心概念，这两个核心概念有点类似于Flexbox布局：

• Grid容器（对应Flexbox布局中的Flex容器）
• Grid项目（对应Flexbox布局中的Flex项目）
  

比如一个这样的HTML结构：

使用 CSS Grid布局首要的第一步，就是通过display:grid;来对容器声明一个网格容器，那么这个div元素里面对应的子元素就自动成为网格项目。

虽然你在div.grid-container中设置了display:grid;，声明了这个元素为Grid容器，但在浏览器中，并看不到有任何的变化。但在在幕后中，他们还是发生了变化，div.grid-container是一个Grid容器，他的所有子元素就自动变成了网格项目。

接下来，使用grid-template-columns: 1fr 1fr 1fr;来定义三列网格：

从gif图中就明显的看出来，现在有点变化了，颜色块变小了，但很难区分出有何变化，为了让效果之间有更突出的差异，再给.grid-container中添加grid-gap:5px：

看到变化了吧，整个网格分了三个列，单元格之间有5px的间距，同时每列的列宽是整个宽度的三分之一，那是因为我们采用了fr单位，而且把整个网格分成了三列，每列的宽度是1fr。这里告诉我们三个知识点：

• grid-template-columns用来把网格指定列的宽度
• grid-gap用来指定列（或行）的间距
• fr可以自动根据网格容器的宽度来计算列的宽度
  

现在我们把grid-template-columns的值改成：1fr 2fr 1fr，对应的效果就会变成：

现在第二列的宽度是第一列和最后一列的两倍。这也再次证明fr单位的强大之处，使用它可以让你很容易定义你的网格尺寸。

现在越来越接近我们想要的网格。但需求是不断变化的，比如我们现在想让顶部的第一行尽可能的宽，比如说跨整个网格列（比如我们网页的头部，或者说我们常见的导航）。如此一来，只需要在第一个网格上使用grid-column: 1 / 4：

或许第一次接触1 / 4会令你感到神秘，其实这个涉及到了CSS Grid中的重要概念之一，那就是网格线，其中第一个数字是列的起始网格线位置，第二个数字是线束网格线的位置。对于一个CSS Grid，可以通过grid-template-columns创建列网格线，grid-template-rows创建行网格线。这种方式创建的是一种显式的网格线。当然，除了这种方式，还可以创建隐式网格线。除此之外，还可以使用grid-auto-rows和grid-auto-columns可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图：

接下来，我们想要有一个300px的侧边栏高度，并且让他的位置是垂直方向的2 / 3。我们可以使用grid-row: 2 / 4来实现，这个特性和grid-column非常的类似。这个时候，效果变成这样：

其实CSS Grid看上去和表格非常的类似，在表格中我们有一个专业的术语，合并单元格。其实在CSS Grid布局中，我们同样有一个类似的特性，那就是在grid-column或者grid-row中引入关键词span，在关键词span后面紧跟一个数值，就是表示合并单元格的数量，先来看下图：

上面的示例中，我们使用到了grid-column: 2 / span 1和grid-row: 2 / span 2。其中grid-column: 2 / span 1表示从列网格线2开始，跨度是1个列网格线（其实就是合并一个列单元格）。而grid-row: 2 / span 2表示的是从行网格线2开始，跨度是两个两个线（其实就是合并两个行单元格）。

接着我们来做页脚，在做页脚之前，我们先删除两个网格项目，因为不需要他们了。做页脚和做页头非常的类似，继续使用grid-column: 1 / 4即可：

通过上面的方式，我们可以轻易的控制网格，也能非常容易的实现一个Web面页的布局，比如一个三列的布局。

点击查看更多精彩前端资源

点击有惊喜