我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战
设置一个
display:grid让这个元素变成一个网格容器，它的子元素就是网格元素了。接下来定义两个新属性grid-template-row和grid-template-column
grid-template-column: 1fr 1fr 1fr; /* fr代表了每列的分数单位(fraction unit), 1fr 1fr 1fr表示三列等宽*/
grid-template-column: 300px 1fr; /* 代表了一个300px的列和一个填满剩余空间的列，单位可以用百分比,px */
grid-gap : 1em 0.5em; /*表示了每个网格之间的间距*/
/*新的符号 repeat*/
grid-template-column: repeat(4, auto); /*等价于*/
grid-template-column:auto auto auto auto;
grid-template-column: repeat(3,1fr 2fr); /*等价于*/
grid-template-column:1fr 2fr 1fr 2fr 1fr 2fr;
/*将网格元素放到指定的位置*/
grid-column: 1/3; /*网格元素水平方向跨越1-3*/
grid-row: 3/4; /*网格元素水平方向跨越1-3*/
/*grid-column是对grid-column-start, grid-column-end的简写*/
下图是对
grid-column，grid-row属性设置后的示意图
网格线还可以自己定义名称
grid-template-column:[start] 1fr [center] 2fr [end]
/*除了网格线，还可以命名网格区域*/
grid-template-areas: 'a e' 'b f' 'c g'
隐式网格
/*grid-auto-rows*/
grid-template-columns: repeat(autofit ,minmax(200px, 1fr));/*最小列设置为200px自动填充*/
grid-auto-rows: 1fr /*每行等高*/
grid-auto-flow: row /column dense; /*控制布局算法的行为，优先填满行或者列, dense表示紧凑填满*/
当网页不知道需要多少网格的时候可以通过隐式网格来布局。
网格调整属性
justify-content: /*网格轨道*/
justify-items: /*水平方向调整*/ /*所有元素*/
justify-self: /*单个元素*/
align-content: /*网格轨道*/
align-items: /*垂直方向调整*/ /*所有元素*/
align-self: /*单个元素*/
至此，网格元素所有的属性都完毕了！
结束语
如果您喜欢我的文章，可以[关注⭐]+[点赞👍]+[评论📃]，您的三连是我前进的动力，期待与您共同成长~
