网格布局。

网格布局 CSS Grid

display:grid;块级网格

display:inline-grid;行级网格

grid-template-columns: ;规定列数和列的宽度

grid-template-rows: ;规定行数和行的高度

取值： 默认none

绝对取值px

百分比

fr 关键字 fraction 弹性系数--按照比例分配剩余空间，一般与绝对单位搭配使用

auto关键字 表示浏览器自行决定

minmax( )表示长度在这个范围之中，分别是最小值和最大值，空间不足时最小值显示，空间有余时最大值表示

repeat( )函数，接受两个参数，第一个为重复的次数，第二个为所需要的数值（多个值也可以重复）

auto-fill 关键字，单元格大小固定，但是容器的大小不确定，如果希望每一行或每一列容纳尽可能多的单元格使用

-->

<!--

行和列的间距

列和列之间的间距

column-gap: ;

行和行之间的间距

row-gap: ;

取值：0默认值

px

百分比：相对于容器进行计算

简写

grid-gap:行间距，列间距 ;

不写第二个值的话，浏览器默认第二个值等于第一个值

-->

<!--

单元格在容器内的位置

justify-content 水平位置，总网格区相对于容器左右对齐方式进行对齐

align-content 垂直位置，

-->

<!--

项目放置顺序

默认先行后列

-->

<!--

区域的命名

grid-template-areas: "a a a",

"b b b",

"c c c",

"d d d";

可以用来添加背景颜色

grid-area:a; 选中

-->

<!--

划分网格区域

grid-row-start: ;

grid-row-end: ;

grid-column-strat: ;

grid-column-end: ;

简写：grid-row：1/2；

grid-column：1/2；

-->

<!--

多列布局

column-count: ;元素被分割的列数

column-width: ;列的宽度

column-rule: ;列与列之间的分割线

属性：style

color

width

简写

column-rule： ；

列间距

column-gap: ;

取值：px

normal默认

-->