之前用的比较多的布局为flex，也有了解Grid布局，通过设置长宽的属性，来达到直接二维划分整个页面。看了下面经，有问到了布局，于是，我就查了grid布局的资料，自己实战练习了下。

〇、我的理解

首先说说grid布局给人的感受。之前的flex就是我需要调整container里的item的位置，调整好了item在container里的位置，再来调整item。给人的感觉就是以item为主体。
但是grid就不同。我一开始直接用横线和纵线把整体分块，并不会一开始关心item元素。然后接下来再操纵item，把item放到分好的框框里面。

以下截图caniuse，虽然grid布局很变态，操作方便，但是目前还不普及，可能明年会很普及？

一、用法

1. grid布局和flex一样，要考虑container以及里面的item。

grid container:

//Grid Container,设置了 display: gird 的元素。grid item 的直接父项
<div class="container">     
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item:

//注意：Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。
<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

二、grid术语

1.Grid Line

分界线组成网格结构。它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。下面例中的黄线就是一个列网格线。

2.Grid Track（轨道？？）

网格的列或行，网格轨道。

3.Grid Cell

每一个格子单元

4.Grid Area

多个grid cell组成的区域

三、语法

1.grid container常见属性

display

.container {
  display: grid | inline-grid | subgrid;
}

grid - 生成一个块级(block-level)网格
inline-grid - 生成一个行级(inline-level)网格
subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。

grid-template-columns / grid-template-rows(重要！！）

直接栗子：

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

给grid line命名,且名字可以有多个

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

gird-template-areas （重要！）

定义grid area的名称。其中，.代表空单元格。然后在子元素上写grid-area:名字，元素便会布局到对应的区域。

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
.item-a {
  grid-area: header; //区域名字不需要引号
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

gird-template

grid-template-rows、grid-template-columns、grid-template-areas 的简写。

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

举个栗子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end] //写一行，一行下面的track区域，区域长25px，分割线
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;  //列线划分
}
以上等价于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

### grid-column-gap\grid-row-gap

指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

然后使用grid-gap:15px 10px;可以简写以上的。若只写一个15px，则column也默认15px。

justify-items

调整items在分块区域里的位置，类比于flex里的justify-content

.container {
  justify-items: start | end | center | stretch;
}

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容位于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间（拉满）(默认值)

自己尝试了下，
1. 初始的html:

<body>
  <div class="container">
  <div class="header">header</div> 
  <div class="main">main</div>
  <div class="sidebar">sidebar</div>
  <div class="footer">footer</div>
  </div>
</body>

2. 添加了justify-items:center后，元素全部居中。

另外，也可以设置对单个元素在格子中的位置，用justify-self。

align-items

类比flex里的align-items，调整纵向位置，方式同上的justify-items。

.container {
  align-items: start | end | center | stretch;
}

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容位于网格区域的垂直中心位置
stretch: 内容高度占据整个网格区域空间(这是默认值)

我的尝试：

justify-content 和 align-content

注意，这是调整网格在网格容器中的位置！！！
因为如果设置非弹性的单位px，网格可能占不满整个容器。可使用如上属性调整网格的横向和纵向

.container { //align-content与下面的一样
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

start - 网格与网格容器的左边对齐
end - 网格与网格容器的右边对齐
center - 网格与网格容器的中间对齐
stretch - 调整g rid item 的大小，让宽度填充整个网格容器
space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

grid-auto-columns / grid-auto-rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小。

先说说隐式网格轨道的意思。

首先，创建2X2网格。

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

2.用grid-column和grid-row来定位item的位置。

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

3.指定的.item-b于列网格线5和列网格线6间，但并未定义列网格线5 6。所以，宽度为0的隐式轨道就会被创建。使用 grid-auto-columns 和 grid-auto-rows属性来指定隐式轨道的宽度：

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

让items按顺序自动填充格子。

.container {
  grid-auto-flow: row | column | row dense | column dense
}

row 按照123456789顺序填充
column
dense

若有元素大小不一致，优先让后面小的元素填补上面大的元素的空间。
让1号项目和2号项目各占据两个单元格，设置gird-auto-flow:row;会有空位。

设置gird-auto-flow:row dense;后：

设置gird-auto-flow:column dense;后：

grid

将以上含有grid的属性合在一起，新手就不说了。

Continue...

Grid布局总结！！container的属性！！！