CSS3 Grid 网格布局知识总结

​简介

网格布局(Grid)​是最强大的 CSS 布局方案。

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。

以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。

图片[1] - CSS3 Grid 网格布局知识总结 - 正则时光

Grid 布局​ 与 ​Flex 布局​有一定的相似性,都可以指定容器内部多个项目的位置。

但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定”项目”针对轴线的位置,可以看作是​一维布局​。

Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。

Grid 布局远比 Flex 布局强大。

注意:在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)

属性用法

display:grid;

1.添加多行多列

grid-template-rows     #添加行
grid-template-columns   #添加列
grid-template: <grid-template-rows> / <grid-template-columns>    #一次性添加行列

值单位:

可以使用绝对定位和相对定位单位如px和em来确定行或列的大小

fr(fraction 的缩写,意为”片段”):设置列或行占剩余空间的一个比例
auto:设置列宽或行高自动等于它的内容的宽度或高度
%:将列或行调整为它的容器宽度或高度的百分比

示例:

grid-template-columns:auto 100px 20% 1fr;    #grid布局分了4列。每列的大小不同。

2.设置行列间隔

grid-column-gap    #创建多列之间的间距
grid-row-gap       #创建多行之间的间距
grid-gap           #为网格添加间距

示例:

grid-gap:50px     #给行列都设置间隔50px;

3.设置单元格大小

先来理解一下网格线:

网格的假想水平线和垂直线被称为线(lines)

这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。 

这是一个 3×3 网格的线条:

图片[2] - CSS3 Grid 网格布局知识总结 - 正则时光

图中蓝色的线条代表列线。

你可以用 grid-column 属性定义网格项开始和结束的位置,进而控制每个网格项占用的列数。 

#items里面单独设置个自的大小
grid-column     #设置水平方向start和end;
grid-column-start    #设置水平方向start
grid-column-end      #设置水平方向end

row同理
grid-row        #设置竖直方向start和end;
grid-row-start​       #设置竖直方向start
​grid-row-end​         #设置竖直方向end

grid-area:<grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>     #同时设置单元格的水平垂直大小。

示例:

grid-column:1/3     #设置单元格在水平方向占用1网格线到3网格线之间的空间,也就是第1、2格子。
grid-area:3/1/4/4;    #设置单元格占用第3-4行,1-4列

4.设置对齐方式

#items里面设置
justify-self         #设置单元格里内容对齐方法  值: start  end   center  stretch(拉伸)
align-self
#container里面设置
justify-items        #设置所有单元格
align-items

5.给单元格命名

图片[3] - CSS3 Grid 网格布局知识总结 - 正则时光

6.repeat函数

grid-template-rows: repeat(100, 50px);     #添加 100 行网格,使每行高度均为 50px

7.minmax()函数

grid-template-columns: 1fr 1fr minmax(100px, 1fr);      #minmax(100px, 1fr)表示列宽不小于100px,不大于1fr

8.auto-fill和auto-fit关键字

repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果:
列的宽度会随容器大小改变,在可以插入一个 60px 宽的列之前,当前行的所有列会一直拉伸。
注意:如果容器无法使所有网格项放在同一行,余下的网格项将移至新的一行。

图片[4] - CSS3 Grid 网格布局知识总结 - 正则时光
上面使用auto-fill,下面使用auto-fit的区别

9.place-items空间居中布局

place-items: <align-items> <justify-items>;

place-items: center;等同于place-items: center center;

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享