# Grid 网格布局核心知识梳理

什么是 Grid 布局

CSS 网格布局(CSS Grid Layout)是最强大的 CSS 布局方案。
Grid 布局提供了带有行和列的基于网格的布局系统,它使网页设计变得更加容易,而无需使用浮动和定位
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。

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

# Grid 布局 VS Flex 布局

VS

相似性:

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

区别:

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局
Grid 布局 远比 Flex 布局强大 !

# 基础概念

名称 描述
container (容器) 采用网格布局的区域称为"容器"
item (项目) 容器内部采用网格定位的子元素 称为"项目"
row (行) 容器里面的水平区域称为 "行"
column(列) 垂直区域称为"列"
cell(单元格) 行和列的交叉区域,称为"单元格"
grid line(网格线) 划分网格的线,称为"网格线"
水平网格线划分出行,垂直网格线划分出列。
注:只有容器的直接子元素会参与网格布局

# 容器属性

Grid 布局的属性分成两类:

一类定义在容器上面,称为容器属性
另一类定义在项目上面,称为项目属性

名称 描述
display: grid; 指定一个容器采用网格布局,容器元素都是块级元素(默认情况下)
display: inline-grid; 该元素内部采用网格布局,该容器元素是内联块元素
grid-template-rows 定义每一行的行高:
① 固定数字
② % :容器宽高的百分比(不包括内边距和边框)
③ fr:分配剩余可用空间
④ auto:先于 fr 计算,获取必要的最小空间
⑤ repeat():简化重复的值
⑥ minmax():取值>=最小值,并且<=最大值
grid-template-columns 定义每一列的列宽:
① 固定数值
② % :容器宽高的百分比(不包括内边距和边框)
③ fr:分配剩余可用空间
④ auto:先于 fr 计算,获取必要的最小空间
⑤ repeat():简化重复的值
⑥ minmax():取值>=最小值,并且<=最大值
grid-auto-flow 定义项目的排列顺序:
① row:默认值),先填满第一-行, 再放入第二行;
② column:先填满第一列, 再放入第二列
③ row dense:在稍后出现较小的项目时,先尽可能的填满第-行,再填满第二行
④ column dense:在稍后出现较小的项目时,先尽可能的填满第一列,再填满第二列
grid-auto-rows 定义浏览器自动创建的多余网格的行高
grid-auto-columns 定义浏览器自动创建的多余网格的列宽
row-gap 设置行间距
column-gap 设置列间距
gap 是 row-gap 和 column-gap 的简写形式
grid-template-areas 定义区域
align-items 设置项目的垂直位置(上中下)
① stretch (默认值) :拉伸,占满单元格的整个高
② start:对齐单元格的起始边缘
③ end:对齐单元格的结束边缘
④ center :单元格内部居中
justify-items 设置项目的水平位置(左中右)
① stretch (默认值):拉伸,占满单元格的整个宽
② start:对齐单元格的起始边缘
③ end:
④ 对齐单元格的结束边缘
⑤ center:单元格内部居中
place-items 是 align-items 和 justify-items 的合并简写形式
align-content 设置整个内容区域的垂直位置(上中下)
① stretch (默认值):项目大小没有指定时,拉伸占据整个网格容器
② start:对齐容器的起始位置
③ end:对齐容器的结束位置
④ center:容器内部居中
⑤ space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
⑥ space-between:项目与项目之间的间隔相等,项目与容器边框之间没有间隔
⑦ space-evenly:项目与项目之间的间隔相等,项目与容器边框之间也是同样长度的间隔
justify-content 设置整个内容区域的水平位置(左中右)
① stretch (默认值):项目大小没有指定时,拉伸占据整个网格容器
② start:对齐容器的起始位置
③ end:对齐容器的结束位置
④ center:容器内部居中
⑤ space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
space-between:项目与项目之间的间隔相等,项目与容器边框之间没有间隔
space-evenly:项目与项目之间的间隔相等,项目与容器边框之间也是同样长度的间隔
place-content 是 align-content 和 justify-content 的合并简写形式
grid-template 是 grid-template-columns、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式(既不易写也不易读,不建议使用)
grid grid 是 grid-template-rows、grid-template-columns、 grid-template-areas、grid-auto-rows、 grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式(既不易写也不易读,不建议使用)

# 项目属性

TIP

项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。

属性名 描述
grid-column-start 左边框所在的垂直网格线
grid-column-end 右边框所在的垂直网格线
grid-row-start 上边框所在的水平网格线
grid-row-end 下边框所在的水平网格线
描述(以上属性指定项目的位置,具体取值如下)
auto 默认值,网格元素按流设置。
number 从第几个网格线开始,到第几个网格线结束
name 通过名字来引用一个命名的网格线
span number 该网格项将跨越所提供的网格数量
属性名 描述
grid-column 是 grid-column-start 和 grid-column-end 的合并简写形式
grid-row 是 grid-row-start 和 grid-row-end 的合并简写形式
grid-area 指定项目放在哪一一个区域
align-self 设置项目的垂直位置(上中下)只作用于单个项目
① stretch(默认值):拉伸,占满单元格的整个高
② start:对齐单元格的起始边缘
③ end:对齐单元格的结束边缘
④ center:单元格内部居中
justify-self 设置项目的水平位置(左中右)只作用于单个项目
① stretch(默认值):拉伸,占满单元格的整个宽
② start:对齐单元格的起始边缘
③ end:对齐单元格的结束边缘
④ center:单元格内部居中
place-self 是 align-self 和 justify-self 的合并简写形式

# 常用布局方案的总结

常用布局方案应用场景:


1、流体布局 宽度随屏幕大小变化,高度不变;

2、rem 和 vw 布局 等比例缩放

3、响应式布局 一次开发,多端使用(多用于展示性网站)

4、flex 布局 轴线布局(一维布局)

5、Grid 网格布局 行列布局(二维布局)

上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X