参照:https://juejin.cn/post/6854573220306255880
和
https://juejin.cn/post/6922062483196903438#heading-25
父容器声明,display:grid 或 display:inline-grid
grid-template-columns 和 grid-template-rows
grid-template-columns 属性设置列宽(),grid-template-rows 属性设置行高
他们会自动分配元素
repeat() 函数
如果有几列或者几行要设置同样的宽度可以用repeat(几个一样的,大小)
auto-fill
表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格
fr
fr 单位代表网格容器中可用空间的一等份
minmax() 函数
网格元素一个最小和最大的尺寸,minmax() 函数产生一个长度范围,表示长度就在这个范围之中都可以应用到网格项目中
grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是,第三个列宽最少也是要 300px,但是最大不能大于第一第二列宽的两倍。
auto
制动填充剩余空间
grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。
grid-auto-rows,grid-auto-column
grid-auto-rows,grid-auto-column表示每行或者每列中每个盒子的大小
justify-items 属性
justify-items: start | end | center | stretch
根据内容适应大小,觉得他们是在网格的哪里排列
align-items同上只是是竖直位置
justify-content
整体在视口的排列位置
justify-content: space-around
justify-content: space-between
justify-content: space-evenly
grid-auto-columns 属性,grid-auto-rows 属性
当你定义了3行网格时候但是实际上有6行,超出的网格浏览器会默认你之前定义的为主,但是你也可以通过 grid-auto-columns 属性,grid-auto-rows 属性来设置超出的元素的大小
grid-template-areas
.代表没东西
grid-column-start 属性,grid-column-end 属性,grid-row-start 属性,grid-row-end 属性
grid-column-start 属性,grid-column-end 属性,grid-row-start 属性,grid-row-end 属性可以指定每个网格的位置
grid-column-start属性:左边框所在的垂直网格线
grid-column-end属性:右边框所在的垂直网格线
grid-row-start属性:上边框所在的水平网格线
justify-self 属性,align-self 属性,place-self 属性
justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个网格。
align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个网格。