CSS3 grid layout（网格布局）（一）

概述

CSS 网格布局 擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

像表格一样，网格布局让我们能够按 行或列 来对齐元素。 然而在布局上，网格比表格更可能做到或更简单的去完成一些布局要求。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

网格布局的特点

1.使用固定或者弹性的轨道大小

• 你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的引入的新单位 fr 来创建有弹性尺寸的网格。（关于fr的相关信息后续再做介绍）

2.精准的元素定位

• 你可以使用行号、行名或者标定一个网格区域来 精确 定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。

3.创建额外的轨道来包含元素

• 可以使用网格布局定义一个 显式网格，但是根据规范它会处理你加在网格外面的内容，当必要时它会自动增加行和列，它会尽可能多的容纳所有的列。

5.可控制的对齐

• 网格包含对齐特点，以便我们可以控制放置到网格区域中的物体对齐，以及整个网格如何对齐。

6.控制重叠内容

• 多个元素可以放置在网格单元格中，或者区域可以部分地 彼此重叠。然后可以CSS中的z-index属性来控制重叠区域显示的优先级。

Grid 是一个强大的规范，当与CSS的其他部分（如 flexbox）结合使用时，可以帮助您创建以前不可能在CSS中构建的布局。这一切都是通过在网格容器上创建一个网格来开始的。

网格容器

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有 直系子元素 将成为 网格元素。

在这个例子中，这有一个类名为 wrapper 的 div 元素作为容器 ，它内部有五个子元素。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

我们在 .wrapper 上设置 display:grid ,使其变为一个 网格容器。

.wrapper {
  display: grid;
}

效果如图

是不是感觉好像看不出来什么
没有关系，让我们在网格容器以及网格元素上添加边框

 .wrapper,
 .wrapper div {
            display: grid;
            border: 1px solid;
        }

此时再来看看效果

现在是不是看起来十分的明显了

但这还远远称不上网格布局

如果我们想让这个例子更加 “网格化”，我们需要使用 网格轨道。