.wrapper { ?display: grid; ?/*生成grid类型块级网格*/ ?grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1fr,成三列网格,fr可以自动根据网格容器的宽度来计算列的宽度*/ ?grid-gap: 10px; /*单元格之间有10px的间距*/ ?grid-auto-rows: minmax(100px, auto); /*设置隐式的行网格线,单元格宽度保持在最小100px,最大auto(即max-content最理想大小的值)之间*/}.one { ?grid-column: 1 / 3;/*规定网格中每列的宽度,第一个数字为列的起始网格线的位置,第二个是线束网格线的位置*/ ?grid-row: 1; /*规定网格中每行的高度若为数字则表示x个单位*/}.two { ??grid-column: 2 / 4; ?grid-row: 1 / 3;}.three { ?grid-column: 1; ?grid-row: 2 / 5;}.four { ?grid-column: 3; ?grid-row: 3;}.five { ?grid-column: 2; ?grid-row: 4;}.six { ?grid-column: 3; ?grid-row: 4;}
关于CSS Grid Layout的代码解释
原文地址:https://www.cnblogs.com/5H5H/p/9712508.html