CSS Grid:页面网格布局从未如此简单

页面布局从来就不是一件让人省心的事!

如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁!那么移动端更加五花八门的布局肯定也是让你吃尽苦头!table不知道你用过没?bootstrap用过没?antd用过没?

这些看似花里胡哨的布局,其实就像是一张网,如果刚开始布局的时候就大局在握,后面就有源可寻!如果开始没梳理好,后面东改西补,你可能会想删代码跑路(不能跑)...前面文章有了解过flex布局(基于轴线的布局方式)像是一维布局。这里的Grid布局(基于网格式布局),在页面排版上将容器分成更为明显的块级网格,从线(flex轴线)到面(grid网格)会使css布局更加便利!

一、Grid概念

CSS Grid:页面网格布局从未如此简单

bootstrap的栅栏格你如果了解过,可能会更好的理解这里的grid!没有用过也没关系,下面是grid一些概念,对造上面的图,方便理解使用grid。

  • 容器:采用网格布局的节点区域就叫做容器。
<div className="cover">
   <div className="item item1 red">1</div> //item是项目
   <div className="item item2 black">2</div>
</div>//cover就是容器

.cover{
    display: grid;
}
  • 网格线:用来分割容器的线。分为水平网格线和垂直网格线,可以将容器分割成行和列。
  • 行和列:水平分割线将容器分割成行(n行需要n+1条水平分割线);垂直网格线将容器分割成列(n列需要n+1条垂直分割线)
  • 单元格:行和列交叉形成了单元格
  • 项目:容器内部采用网格定位的子元素,只能是顶层元素,称为"项目"

要明白单元格与项目不是一回事。不要混淆了。

CSS Grid:页面网格布局从未如此简单

概念大致明白了?那就通过容器项目的属性来进行网格式布局吧。

二、容器属性

下面主要通过7个属性来设置设置构建容器。

  • grid-template-columns/grid-template-rows 设置列/行内容的属性
  • grid-gap 设置列/行间距的属性
  • grid-template-areas 设置单元格区域的属性
  • grid-auto-flow 设置单元格方向属性
  • place-items 设置单元格内内容排列位置的属性
  • place-content 设置整个内容区域在容器里面的位置的属性
  • grid-auto-columns/grid-auto-rows 设置超出原有网格的单元格属性

1.grid-template-columns/grid-template-rows

通过display:grid指定节点使用网格布局后,要开始构建我们的行和列了。

grid-template-columns 设置列属性;
grid-template-rows 设置行属性;

这个属性可以用来设置行高和列宽,设置的参数的值的方式有很多种写法:

下面设置一个3行4列的表格,每个单元格的空间都是100px;下面主要以列来做示例,行的用法是一样的哦。这个属性值比较多,要耐心看

1》使用绝对单位

grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px;

CSS Grid:页面网格布局从未如此简单

2》使用百分比%

除了使用单位px,还可以使用%;

grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33% 33% 33%;

3》使用repeat方法

当有网格很多且重复时,可以使用repeat。repeat接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。

grid-template-rows: repeat(3 , 33%);
grid-template-columns: repeat(4, 25%);

repeat除了重复值,还可以重复模式

grid-template-columns: repeat(2, 100px 100px);

假如repeat里第一个参数改为3,表示重复3次上述模式,所以下图里的单元格空间已经超出容器了,假如我们不想让它超出,想让容器自动判断是否填充,可以使用auto-fill关键字。

CSS Grid:页面网格布局从未如此简单

grid-template-columns: repeat(auto-fill, 100px 20px 80px);

4》fr 关键字
fr(fraction 的缩写,意为"片段"),如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。也可以结合px使用,会对剩余空间按照fr进行分配。

grid-template-columns: 50px 3fr 1fr 2fr;

CSS Grid:页面网格布局从未如此简单

5》minmax()方法

minmax()接受2个参数,最小值和最大值长度范围,该列/行的大小会根据剩余空间进行自动分配,大小在长度范围内。

grid-template-columns:150px 1fr 1fr minmax(50px, 150px);

CSS Grid:页面网格布局从未如此简单

6》auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns:100px auto 130px 100px;

CSS Grid:页面网格布局从未如此简单

第二列会根据剩余空间自动分配空间。

7》网格线的名称

除了设置大小,也能设置网格线的名称,使用方括号,指定每一根网格线的名字,方便以后的引用。4列就需要是5条分割线,分割线的名称可以重复。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] auto [c4];

2.grid-gap

grid-gap 属性用来设置行/列间距的,是grid-row-gap 属性、grid-column-gap 属性,的合并简写。这3个属性最新标准也可不写前缀,写为row-gap、column-gap、gap

grid-row-gap:10px;
grid-column-gap:20px;
等价于下面代码:
grid-gap:10px 20px;
等价于:
gap:10px 20px;

CSS Grid:页面网格布局从未如此简单

3.grid-template-areas

网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid-template-areas: 
    'a a a a '
    'b b b b ' 
    'd e . g ';
    
1.将单元格写成相同的名字就可以合并区域
2.如果某些区域不需要利用,则使用"点"(.)表示。

区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。

4.grid-auto-flow

划分网格以后,容器的子元素(项目)会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行。
grid-auto-flow决定放置顺序,默认值是row。

grid-auto-flow: column;//可将放置顺序改为先列后行

当对**项目**进行指定位置时,看下图,项目1上面会有一片无人使用的区域。
.item1 {
    grid-row-start: 2;
    grid-row-end: 4;  
}

CSS Grid:页面网格布局从未如此简单

grid-auto-flow: column dense;
//dense表示要尽可能紧密填满,尽量不出现空格。

CSS Grid:页面网格布局从未如此简单

5.place-items

从前面的一些图可以看出来,网格布局界限十分清晰,但是我们的项目内容却始终躲靠在单元格的左上角,显得十分的胆怯。哼!我们自然要把它揪出来。

place-items决定项目的水平和垂直位置,是justify-items(水平位置) 属性、align-items(垂直位置) 属性的合并缩写:

place-items:center center;

等价于:

justify-items: center 
align-items: center

CSS Grid:页面网格布局从未如此简单

当然属性值除了center,具体属性值如下:

start:对齐单元格的起始边缘。

end:对齐单元格的结束边缘。

center:单元格内部居中。

stretch:拉伸,项目大小没有指定时-占满单元格的整个宽度(默认值)。

如果省略第二个值,则浏览器认为与第一个值相等。

6.place-content

我们把容器设置大点,就会发现整个内容区域在容器里面的位置也是躲靠在左上角的,可以通过place-content来设置。使用方法大致同等上面place-items

place-content是justify-content(水平方向) 属性、align-content (垂直方向)属性的缩写。

place-content:center

CSS Grid:页面网格布局从未如此简单

属性有以下取值:

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时,拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

7. grid-auto-columns/grid-auto-rows

当项目超出容器,设置超出原有网格的单元格属性时,超出的单元格大小将于项目大小一样。可以通过grid-auto-columns/grid-auto-rows设置超出部分单元格的大小。

设置一个行超出容器的项目,超出部分行高将于项目一样高。
.item1 {
    grid-row-start: 4;
    grid-row-end: 5;  
}
设置超出部分行高为200px,如下图
grid-auto-rows: 200px;

CSS Grid:页面网格布局从未如此简单

还有两种简写方法如下:

grid-template 属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid 属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

三、项目属性

  • grid-column/grid-row 设置项目位置
  • grid-area 设置项目放置区域
  • place-self 设置项目在单元格内的位置

1.grid-column/grid-row

上面已经用到过这个属性,就是设置项目在容器中的位置。
grid-column是grid-column-start(左边框所在的垂直网格线)、grid-column-end(右边框所在的垂直网格线)的缩写。
grid-row是grid-row-start(上边框所在的水平网格线)、grid-row-end(下边框所在的水平网格线)的缩写。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1.可以通过数字指定第几根线。下面只设置了列的开始和结束,行没设置,则会在默认位置。
.item1 {
    grid-column-start: 1;
    grid-column-end: 2;  
 }
2.也可以设置为指定为通过**grid-template-columns**设置的网格线的名字。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] 100px [c4];
.item1 {
    grid-column-start: c2;
    grid-column-end: c3;  
  }

3.使用span关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
.item1 {
    grid-column-start: 2;  
    grid-column-end: span 2; 
 }
等价于:
.item1 {
    grid-column:2 / span 2  
  }

CSS Grid:页面网格布局从未如此简单

2.grid-area

设置项目在容器中的区域位置。与上面通过分割线的只用一样,所以也能做为分割线4个属性的缩写。

grid-template-areas:
    'a a a a'
    'a a a a'
    'd c c c'
.item1 {
    grid-area: a
  } 

等价与:


.item1 {
    grid-area: 1 / 1 / 1 / span 4
  }

CSS Grid:页面网格布局从未如此简单

3.place-self

与place-items用法一致,但只作用于单个项目,能覆盖place-items的值。是justify-self(设置单元格内容的水平位置 左中右)、align-self(设置单元格内容的垂直位置上中下)的缩写。

.cover{
  place-items:center
    
}
.item1 {
    place-self: start
  }

CSS Grid:页面网格布局从未如此简单

参考文章

如有不妥!欢迎指正

相关推荐