grid布局又称网格布局，因为属性太多了，在整理大神阮一峰的博客后，我写下这篇博客，方便日后自己翻看的时候加深一点印象。

父盒子设置

行和列

在grid布局中，就跟flex一样，需要先设置父盒子的display:grid属性，然后来给父盒子设置有几行几列。

.container{
      display:grid;
      grid-template-rows:repeat(5,20%);//设置行
      grid-template-columns:repeat(5,20%);//设置列
}

上面代码设置了一个五行五列的盒子，每行占20%，如果想要单独设置，则不需要repeat()函数直接写就行了。

单位

单位可以写px、百分比、或者fr（份）auto(表示自己决定长短),使用fr关键字非常方便

行间隔与列间隔

grid-row-gap 属性行间隔

grid-column-gap 属性列间隔

grid-gap 属性简写用空格隔开

指定区域

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'a e c'
                       'a h i';
}

上面代码分出了a b c e h i 6个区域

如果某些区域不需要利用，则使用"点"（.）表示。

使用了grid-template-areas之后，需要在子项目上配合使用grid-area才能生效。

上面的代码可以省略grid-template-columns和grid-template-rows，同样可以生效。

areas非常方便，但是需要子项目上添加grid-area来对应，直观的同时却增加了代码量，大家看喜爱度使用。

设置子项目中的内容排列

justify-items 属性，设置单元格内容的水平位置（左中右）
align-items 属性，设置单元格内容的垂直位置（上中下）
place-items 属性是上面属性的简写

属性：

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

设置整个内容区域的排列

justify-content 属性，整个内容区域在容器里面的水平位置（左中右）
align-content 属性，整个内容区域的垂直位置（上中下）
place-content 属性，简写

属性：

start - 对齐容器的起始边框
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

设置项目属性

设置项目从哪条线占用到哪条线

设置列的占用位

grid-column:start / end

是grid-column-start和grid-column-end的简写从1开始置

设置行的占用位置

grid-row:start / end 是grid-row-start和grid-row-end的简写从1开始

指定项目放在哪个区域和grid-template-areas配合使用

grid-area属性指定项目放在哪一个区域

.item-1 {
  grid-area: e;
}

放到e区域

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

单个项目用的内容排列

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

简写： place-self: <align-self> <justify-self>;

属性:

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

参考文档：阮一峰的CSS Grid 网格布局教程

写给自己看的grid布局