Grid布局

最近在重新巩固html方面的知识，这里分享下自己学习过程中跟随别人学习的笔记和心得。

目前，网页布局一般有table，float，flexbox和grid布局。

table和float布局较为老，目前有淘汰趋势了，而flexbox布局是现在比较流行的布局方式。

flexbox布局属于一维布局，Grid属于二维布局的排版方式。

一个Flexbox容器智能控制一个方向，水平或者垂直方向。如果要控制另一个方向，则要再添加一层flexbox容器。

Grid可以一次控制2个方向，就可以直接定义容器内元素的位置了。

Grid Line

下面用项目直接来看：

我们画出了一个5*5个格子的div容器，id定义为grid-container，其中row和column都标注了起始点至结束点的线条序列。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:100px 100px 100px 100px 100px;
  grid-template-columns:100px 100px 100px 100px 100px;
}

如以上代码，我们设置将容器设置为grid布局，并且rows和columns分隔成100px等格的方块。效果图如下：

<div id="grid-container">
  <div class="cell-1"></div>
  <div class="cell-2"></div>
</div>

容器中，我们设定了2个div，分别是cell-1和cell-2。

.cell-1{
  background-color:green;
  grid-row:2/4;
  grid-column:1/3;
}
.cell-2{
  background-color:yellow;
  grid-row:4/6;
  grid-column:3/6;
}

按以上代码，我们设置了2个子div的背景色和row与column占得位置。得出的图形如下：

grid-row:num/num和grid-column:num/num意思是row或者column方向由第几条线到第几条线的值，这些线在grid布局里我们称为==grid line==。

除了这种写法，我们还有另外几种写法：

第二种写法：

.cell-1{
  background-color:green;
  grid-area:2/1/4/3;
}
.cell-2{
  background-color:yellow;
  grid-area:4/3/6/6;
}

grid-area：grid-area定义的顺序是gird-row的第一个grid line值，grid-column的第一个grid line值， gird-row的末尾grid line值，grid-column的末尾grid line值。

第三种写法：

.cell-1{
  background-color:green;
  grid-row:2/span 2;
  grid-column:1/span 2;
}
.cell-2{
  background-color:yellow;
  grid-row:4/span 2;
  grid-column:3/span 3;
}

grid-row:num/span num和grid-column:num/span num意思是从第几个grid line延伸几格的意思。

一般第三种方法较为常用。

最后种方法

因为我们实际项目中，不可能看到grid line的具体数字的，最后种方法，我们需要定义grid line的坐标值，直接根据坐标值来定位。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
}

我们直接在父容器中，设定grid line的坐标值。rows方向设定为Y轴，columns设定为X轴。

那我们可以直接从css代码就一目了然知道grid line的坐标轴了。

.cell-1{
  background-color:green;
  grid-row:Y1/Y4;
  grid-column:X1/X3;
}
.cell-2{
  background-color:yellow;
  grid-row:Y4/Y6;
  grid-column:X3/X6;
}

那原来写法便可以改为此种写法。一目了然。

Grid Areas

grid的分隔线我们称作grid line，而grid中的方格我们则成为grid area。

还是直接用代码演示：

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
}

我们直接定义grid-template-areas的值，如以上代码。

这里定义的值的意思便是给每个方块设置了别名，而.则代表忽略该方块：

<div id="grid-container">
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>

我们设置grid-container的div使用grid布局，并且有四个子容器

.cell-1{
  background-color:green;
  grid-area:header;
}
.cell-2{
  background-color:yellow;
  grid-area:footer;
}
.cell-3{
  background-color:red;
  grid-area:nav;   
}
.cell-4{
  background-color:black;
  grid-area:main;
}

这时候我们设定每个子容器所拥有的area别名，就能得到以下的图。

我们再把用来标尺的背景图去除。就能得到以下结构：

是否很眼熟，一般的网页布局就出现了。

假如我们想把每个布局设置下间隔，可以在grid-container设置row-gap和column-gap属性，并把背景色宽度高度重新设置。便可以发现如下图的布局结构了。

#grid-container{
  display:grid;
  width:540px;
  height:540px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

fr和repeat()

fr这个单位是专门用于Grid的比例的单位，1fr即占一份的意思。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

比如这里，设置了5个1fr，那么1fr就表示占1/5的大小。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:3fr 1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

grid-template-rows改成3fr 1fr 1fr 1fr 1fr;，则代表第一个row占比3/7权重区域。从下图看，top区域变大。

这里我们重复写fr有点累吧，所以这时候可以用到repeat这个函数。

repeat(time,content):time代表要重复多少次，content则代表要重复些什么。

所以，刚才的代码可以改成这样：

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:3fr repeat(4,1fr);
  grid-template-columns:repeat(5,1fr);
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

这样就会很清晰，当分隔数量多的时候，就不会乱了。但要注意一点：

==repeat不适用于grid-template-areas==

以上就是css grid布局的所有内容，前端学习过程要感谢B站的CodingStartup的Steven,不过他的讲解基本是粤语和视频，很多笔记我只能在看的过程自己整理，虽然直接我也从事程序开发，但是很多时候只知道要这么做，却不知道为什么要这么做，所以工作几年后重新回头巩固知识，以上是我在学习过程中自己整理的学习笔记，希望可以帮到大家。