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'
