blog-web/CSS布局(4)-Grid.md at 368ea5915bf1007de17a2918f48bff62e5e4c0cd

sookie/blog-web

Fork 0

结发受长生 368ea5915b 代码缩进调整

2018-05-10 09:47:30 +08:00

4.0 KiB

Raw Blame History

title

date

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;
}

实际效果如下

4.0 KiB Raw Blame History Unescape Escape