css-grid布局

吃杠碰小鸡2025-03-22 12:06

文章目录

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

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

1、布局

启用grid布局

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

css 复制代码

display: grid;

2、网格轨道

grid-template-columns：规定一行有多少格，空格分隔，"value value value"表示有三个格子；由于元素会换行排列，columns轨道属性更加重要

grid-template-row：规定一行的高度，"value1 value2 value3"表示规定两行的高度，如果行数超过三行，后续行的高度等于value1

css 复制代码

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' 这种少一个就会异常

css 复制代码

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