grid布局

这是一个非常强大的功能,flex布局可能很多行代码,用grid的话最少代码减半。但是更要去了解的是grid的思路和思想
与以前的table布局类似,grid更像是flex+table的方式

display: inline-grid vs display: grid

跟块级元素和内联元素类似

grid-template-columns 和 grid-template-rows

以grid-template-columns举例,有下面N种写法

  • grid-template-columns: 100px 100px 100px;
  • grid-template-columns: 33.33% 33.33% 33.33%;
  • grid-template-columns: repeat(3, 33.33%);
  • grid-template-columns: repeat(auto-fill, 100px);
  • grid-template-columns: 1fr 1fr;
  • grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  • grid-template-columns: 100px auto 100px;

其中既有固定宽度的、也有百分比、等比分配fr,自动计算等等。可谓是非常灵活多变,常见的三列等分,可以用下面的布局方式,其中column-gap还可以支持按照间距分配。

多等分布局

/* 三等分,且间距为20px */
.box{
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

其中repeat的3可以换成n,就是多等分布局了

圣杯布局

类似左右边栏为200px,中间部分满屏,间距为10px,代码如下

.box{
  grid-template-columns: 200px auto 200px;
  column-gap: 10px;
}

实战

一个表格的例子,这里需求是三分表格,之后最后一列文字右对齐。还有row对应的border-bottom。本来想用flex或者是table,转念一想还是上grid,毕竟多用才能熟,遇到了不少问题。

<template>
  <div class="score-detail">
    <div class="score-detail__title">
      当前周期数据
    </div>
    <div class="score-detail__main">
      <div class="bold">
        指标名称
      </div>
      <div class="bold">
        得分
      </div>
      <div class="bold">
        较上一周期
      </div>
      <div>1</div>
      <div>3</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.score-detail{
  padding: 32px 48px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.01);
  &:last-child{
    margin-top: 16px;
  }
}
.score-detail__title{
  font-weight: bold;
  margin-bottom: 24px;
}
.bold{
  font-weight: bold;
}
.score-detail__main{
  display: grid;
  grid-template-columns: 50% 1fr 1fr;
  div {
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid pink;
    &:nth-child(3n+3) {
      text-align: right;
    }
  }
}
</style>

运行结果如下

三等分并不能完全满足我的需求

grid-template-columns: 1fr 1fr 1fr;

中间得分一列太靠左,所以这里改成了,尽量接近设计稿的3等分

grid-template-columns: 50% 1fr 1fr;

grid布局里row border的问题

其次是这里的border-bottom,因为grid布局就没有对这里的行border做约束,翻了下stackoverflowopen in new window,一个是用背景渐变repeating-linear-gradient+row-gap。还有一个方法是用伪类在每行最后一个元素后面加一个大横条。

感觉都属于hack的手段,果断子元素border-bottom走起,不过发现

&:nth-child(3n+3) {
  justify-self: right;
}

这里右对齐的效果会打断

所以修改了属性

&:nth-child(3n+3) {
  text-align: right;
}

grid布局row height的问题

如果设置

grid-template-rows: 52px;

只会对第一个元素生效,所以这里对子元素设置height+line-height实现文字垂直居中对齐和撑大容器高度使其满足间距

兼容性

  • IE10+基本PC主流浏览器都支持
  • 微信生态基本支持(包括移动端页面和小程序),偏门的属性等有待支持,具体的可以再去查

参考

阮一峰-CSS Grid 网格布局教程open in new window

Last Updated:
<manfred>峯</hu>
欢迎关注微信公众号 【Big前端】无广告,无软文,就是这么傲娇。直推一线大厂高质量内容,不局限于前端·后台·运维相关,还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节,对腾讯字节比较熟悉,简历可以发给我,我会给你介绍一线大厂的情况,让你更加了解一线大厂