Grid布局

Web布局经历的四个阶段：
1、table
2、float和position定位
3、flex
4、grid

grid也分为网格容器和网格项目

网格容器

display: grid 生成一个块级网格
display: inline-grid 生成一个内联网格
display: subgrid 如果你的网格容器是另一个网格的网格项，可以用这个属性表示

如果我们只是单纯地添加上面两个属性，盒子的布局方式看起来并没有什么变化，要使它成为二维网格容器，我们需要定义行和列，用grid-template-columns和grid-template-rows属性，可取的值有长度值，百分比，或者等份网格容器中可用空间（使用fr单位）。我们还可以给网格线起名字，详情参见http://www.css88.com/archives/8510

<div id="div1">
  <div style="background-color: lightpink">1</div>
  <div style="background-color: yellow">2</div>
  <div style="background-color: red;">3</div>
  <div style="background-color: grey">4</div>
  <div style="background-color: green">5</div>
  <div style="background-color: lightgrey">6</div>
</div>

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 40px;
}

效果如图

放置子元素

定位和调整子元素大小用grid-column和grid-row属性来设置

我们希望item1占据从第一天网格线开始，到第四条网格线结束（换句话说，它独立占据整行）

<div id="div1">
  <div style="background-color: lightpink">1</div>
  <div style="background-color: yellow">2</div>
  <div style="background-color: red;">3</div>
  <div style="background-color: grey">4</div>
  <div style="background-color: green">5</div>
  <div style="background-color: lightgrey">6</div>
</div>

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 40px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

效果如图

上面css代码的简写

.item1 {
    grid-column: 1 / 4;
}

一个更灵活的布局示例：

.item1 {
  grid-column: 1 / 3;
}

.item3 {
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 2 / 4;
}

效果如

grid-template-areas

通过引用grid-area属性指定的网格区域名称来定义网络模板。重复网格区域的名称导致内容跨越这些单元格。一个.号代表一个空的网格单元。这个语法本身可视作网格可视化结构。
取值：

• : 由网格项的的grid-area指定的网格区域名称
• .:代表一个空的网格单元
• none：不定义网格区域

代码示例：

#div1 {
  background-color: pink;
  /*-webkit-display: grid;*/
  /*display: grid;*/
  display: grid;
  /*grid-template-columns: 100px 100px 100px;*/
  /*grid-template-rows: 40px;*/
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px;
  grid-template-areas:
  "header header header header"
  "main main . sidebar"
  "footer footer footer footer";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: main;
}

.item3 {
  grid-area: sidebar;
}

.item4 {
  grid-area: footer;
}