css-grid布局

文章目录

• 1、布局
• 2、网格轨道
• 3、间距Gap
• 4、网格线
• 5、网格别名

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

1、布局

• 启用grid布局
• 类似与flex布局，不过grid是对每一格进行属性预设置，如轨道数、间距统一设置；flex更关注于元素之间的排列关系

display: grid;

2、网格轨道

• grid-template-columns：规定一行有多少格，空格分隔，"value value value"表示有三个格子；由于元素会换行排列，columns轨道属性更加重要
• grid-template-row：规定一行的高度，"value1 value2 value3"表示规定两行的高度，如果行数超过三行，后续行的高度等于value1

grid-template-columns: auto auto auto auto;

3、间距Gap

• grid-column-gap：column之间的间距
• grid-row-gap：row之间的间距
• grid-gap：grid-row-gap grid-column-gap ；属于前两个属性的集合

4、网格线

• grid-column-start：某一个元素column起始网格线的编号，（grid-column-start和grid-column-end一起写才生效，只有一个无效）
• grid-column-end：某一个元素column终止网格线的编号，
• grid-row-start: 某一个元素row起始网格的编号，(同理，需要一起使用)
• grid-row-end: 某一个元素row终止网格线的编号，

5、网格别名

• grid设置属性，可以规定网格的别名，可以同名
• grid-area：1、某一个元素可以设置他占据的网格别名，如.item1 { grid-area: item11; }；2、grid-row-start / grid-column-start / grid-row-end / grid-column-end，设置两个起始点、两个终点，占据四条网格线分隔的区域；3、grid-row-start / grid-column-start / span rowNum / span columnNum，设置两个起始点，不设置终点网格线，而是设置占据的span网格数（类似于单元格合并）
• grid别名时要满格，每行、每个元素都要照顾到；grid:'One Two Three' 'Four Five' 这种少一个就会异常

display: grid;
grid:
'One Two Three'
'Four Five Six'