CSS布局(4)-grid

总字数 1k

预计阅读时间 4 分钟

Grid布局是网站设计的基础
是创建网格布局最强大和最简单的工具

FlexBox与Grid

FlexBox是一维布局系统 , 适合做局部布局 , 比如导航栏组件
Grid是二维布局系统 , 通常用于整个页面的规划
二者从应用场景来说并不冲突
虽然FlexBox也可以用于大的页面布局 , 但是没有Grid强大和灵活
二者结合使用更加轻松

应用指南

HelloWorld

要把某个元素变成一个网格(grid) , 只需要把display属性设置为grid即可
DOM结构

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS

.wrapper {
  display : grid;
}
/* 这里为了清晰看到效果,给子元素添加了一些样式,不过与grid无关 */
.wrapper div {
  background: pink;
  margin:2px;
  text-align:center;
  padding:3px 0;
}

当然此时还没有什么特别的表现 , 只是6个div简单地堆叠在一起

Columns与Rows

为了使其成为二维的网格容器 , 我们需要定义这个网格的列和行
分别对应grid-template-columns和grid-template-rows属性

.wrapper {
  display : grid;
  grid-template-rows: 60px 40px;
  grid-template-columns: 120px 60px 80px;
}

grid-template-columns 属性的值当中有几个数值 , 就代表有几列 , 每个数值对应每一列的宽度
grid-template-rows 属性的值当中有几个数值 , 就代表有几行 , 每个数值对应每一行的高度

所以在上面的例子里面 , 是定义了一个3行×2列的网格

现在的效果是这样了

当然 , grid容器中的子元素会依次填充每个网格
如果不够 , 那就留空

如果多了 , 也会继续往后排 , 但是新的一行已经没有高度值可用 , 所以就是这个div的默认高度(根据div的内容而定)
但是仍然被第一列的宽度约束

子元素

与以往使用的<table>元素一样 , 我们常常需要某个单元格来横跨多列 , 或者纵跨多行
体现在grid当中 , 就是对子元素添加css属性进行控制了
但是需要首先了解grid布局当中的一个参照 , 就是网格线

这里有4条纵向的网格线 , 也就是columns的网格线
以及3条横向的网格线 , 也就是rows的网格线

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

现在我们要让item1横跨3列 , 也就是从第一条纵向网格线 , 到第四条纵向网格线
那么需要对其定义css属性如下

.wrapper > .item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

这个元素实际占据了3个网格 , 把之后的元素都推到了下一行

到这里grid布局比起传统的table元素 , 优势就体现出来了
grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定义的 , 在网格当中顺序填充 , 在页面中表现为二维结构
而传统的table元素 , 则必须要在其中以二维的方式去定义tr和td
灵活性相比就差了很多

我们还可以用更简洁的写法

.wrapper > .item1 {
  grid-column: 1 / 4;
}

再复杂一些

理解了子元素的控制是以网格线为参照之后
我们就可以实现出更加复杂的布局了

.wrapper {
  display : grid;
  grid-template-rows: 60px 40px 60px;
  grid-template-columns: 120px 60px 80px;
}
.wrapper > .item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.wrapper > .item3 {
  grid-row-start: 2;
  grid-row-end: 4;
}
.wrapper > .item4 {
  grid-column-start: 2;
  grid-column-end: 4;
}

实际效果如下