Grid布局

时间 2020-11-10

标签 css html 前端函数布局学习 flex flexbox spa code 栏目 CSS 繁體版

原文原文链接

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

目前，网页布局通常有table，float，flexbox和grid布局。html

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

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

一个Flexbox容器智能控制一个方向，水平或者垂直方向。若是要控制另外一个方向，则要再添加一层flexbox容器。布局

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

Grid Line

下面用项目直接来看：flex

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

#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等格的方块。效果图以下：
spa

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

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

.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,不过他的讲解基本是粤语和视频，不少笔记我只能在看的过程本身整理，虽然直接我也从事程序开发，可是不少时候只知道要这么作，殊不知道为何要这么作，因此工做几年后从新回头巩固知识，以上是我在学习过程当中本身整理的学习笔记，但愿能够帮到你们。