「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

什么是CSS网格布局

这里简单讲讲什么是CSS的网格布局，他的的英文名叫CSS Grid Layout，它是CSS3为布局新增的一种布局模式

网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级

其中网格可以理解为是是一组相交的水平线和垂直线，它定义了网格的列和行，就像表格一样，但他和表格不同，网格布局没有内容结构

浏览器支持

目前最新的主流浏览器版本都支持了网格布局，具体如下

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素

例如

.container { display: grid; }

column-gap 指定列之间的间隙
gap row-gap 和 column-gap 的简写属性
grid grid-template-rows, grid-template-columns, grid-template-areas, - grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns 指的默认的列尺寸
grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows 指的默认的行尺寸
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-column-end 指定网格元素列的结束位置
grid-column-gap 指定网格元素的间距大小
grid-column-start 指定网格元素列的开始位置
grid-gap grid-row-gap 和 grid-column-gap 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
grid-row-end 指定网格元素行的结束位置
grid-row-gap 指定网格元素的行间距
grid-row-start 指定网格元素行的开始位置
grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas 指定如何显示行和列，使用命名的网格元素
grid-template-columns 指定列的大小，以及网格布局中设置列的数量
grid-template-rows 指定网格布局中行的大小
row-gap 指定两个行之间的间距