grid布局是二维布局，他主要是 规定了行和列

下文用到的图许多出自grid garden，是一个很好玩的grid布局游戏。
它主要规定行和列，用

 grid-template-rows: 
  grid-template-columns: 

就可以规定行和列的布局分布，比如说

 grid-template-rows: 240px repeat(4, 120px); 
  grid-template-columns: 250px 250px;

就代表了分成5行，第一行占有240px，剩下的每行占有120px。
分为两列，各是250px。
通常我们会用grid-gap来确定每个元素中间的空隙。

分区：

grid-column-start
grid-column-end
grid-row-start
grid-row-end
通常用这个进行分区。
但是我们可以缩写，用grid- area:1/2/3/4
就可以代表
grid-row-start：1
grid-column-start：2
grid-row-end：3
grid-column-end：4，注意就是grid是按线来进行分区的，如图所示。

grid garden
grid-area:1/2/span 3/span 4;
Tip：1. 这里的row start从第一行开始是从顶部开始算的，这里的span是你自己划分区域的格子，如果是平均分的就可以用span来代表格子，往后数几个这样。column start也是，从最左边的线数起。而且grid-area可以有所覆盖。

2. 这里的线是要在你心里画出来的或者设计稿画出来，css上面怎么加border都体现不了。

3. start和end的值不一定谁大谁小，可以看到下图的end值比start小，也没有关系，它会自动调换start和end的值。

   
   grid garden

   ，同时他们还可以是负数。如果你想要从右边数网格的列数而不是从左边数，你可以设置grid-column-start和grid-column-end为负值。比如说，你可以设置它为-1来指定为右边的第一列。

4. 这里的order命令和flex的相近。
5. fr：每一个fr单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。注意fr是分配剩下的空间，如果说是
   grid-template-columns:50px 1fr 1fr 1fr 50px;
   这里就是左右两个50px就被占用了无法被fr分配。
6. grid-template是grid-template-rows和grid-template-columns的缩写形式。
   比如说，grid-template: 50% 50% / 200px;将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。
   eg：grid-template: 60% 40% / 200px;
   grid garden

下面是一个grid布局的示例代码的链接，以及其output。记住这个其他都能记得了。

传送门