优势

之前，我们所学的都只是一维层面的布局，常常只能处理一行的内容排布，对于复杂页面其实还是十分麻烦的。而grid作为真正的二维布局，有着极强的优势，让你能过随心所欲，天马行空的在页面上挥洒创意。
在这里插入图片描述
上图即为一个例子，如果大家会怎么写呢？而用grid布局，大大轻松了这个工作。

写法教学

1.初步布局（画格）

我们可以把grid布局，认为是通过在页面上画“竖线”及“横线”，将页面分成一个个区块，让我们填入内容。
在这里插入图片描述

画线

画线	方法	常用属性
竖线	grid-template-columns	px 、%、fr、minmax()、auto、repeat()
横线	grid-template-rows	与上一致

我们可能绘制的单元格有限，而block（块级元素）超出单元格数量，而此时浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。当然，我们完全也可以自己来决定。

画线	方法	常用属性
竖线	grid-auto-columns	px 、%、fr、minmax()、auto、repeat()
横线	grid-auto-rows	与上一致

px:具体像素值
%：屏幕的百分比
fr:弹性因子（特殊单位，可以理解为除去绝对长度后，将屏幕按fr占比分配
minmax（min，max）:内置两个参数，来决定范围
auto：由浏览器自己决定长度，通常都是最大长度

当然，如果每次都是自己指定画线，要画太多条线了还是会感觉很繁琐的。于是乎，出现了一个简化工作的方法——repeat().

repeat（）方法即是重复，内部参数为（重复次数，绘制），例如可以写
repeat(2, 100px 20px 80px)：效果如下：
在这里插入图片描述
当然，如果你不想指定具体次数，可以使用auto-fill，它会重复到直至超出屏幕最大宽度。

画间隔

画间隔	方法	常用属性
行间隔	grid-row-gap	px 、%、fr、minmax()、auto、repeat()
列间隔	grid-column-gap	与上一致
综合间隔	grid-gap: row column	如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

2.定位（占据单元格）

我们的定位有两种思路：
1.给单元格命名，然后将需要放置的区块，指定名字
2.指定内容的行列线

命名法：

grid-template-areas：“单元格命名”
具体例子：
grid-template-areas: ‘a b c’
‘d e f’
‘g h i’;
如果某些区域不需要利用，则使用"点"（.）表示。
grid-area：”单元格名字“（给内容指定格子）
使用这个方法，可以很清晰的将页面分块，同时知道每个区块的功能，可以多多使用。

定线法：

定线	方法	具体写法
定竖线	grid-column	start-line / end-line
列间隔	grid-row	start-line / end-line

这个是指具体的线，可以去看之前的那张网格图，明白如何指定线
grid-column: 1 / 3（竖线1–竖线3）
也可以用span数字，表示跨越几条线。

3.对齐方式

grid布局中的行列对齐

放置	方法	常用属性
水平位置	justify-content	start、end、center、stretch、space-around、space-between、space-evenly
垂直位置	align-content	与上一致
综合位置	place-content：垂直水平	如果省略第二个值，浏览器就会假定第二个值等于第一个值。

区块内容对齐

放置	方法	常用属性
水平位置	justify-items	start、end、center、stretch
垂直位置	align-items	与上一致
综合位置	place-items：垂直水平	如果省略第二个值，浏览器就会假定第二个值等于第一个值。

当然我们也可以对每一个内容单独设计对齐方式

放置	方法	常用属性
水平位置	justify-self	start、end、center、stretch
垂直位置	align-self	与上一致
综合位置	place-self：垂直水平	如果省略第二个值，浏览器就会假定第二个值等于第一个值。

参考文章：
CSS Grid 网格布局教程
作者：阮一峰
日期： 2019年3月25日
链接：https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Css最强布局-grid，速通式教学

目录

优势