CSS之display:grid的用法和动态:before content内容

项目诉求：

突然有个需求，就是 指定行列，并呈现N字型展示数据，如下所示：

有纠结是用display:flex 还是 display:grid

display	N字型	N字型属性	指定行列	指定行列顺序
flex	√	flex-direction: column-reverse;	×	无相关属性
gird	×	无相关属性	√	grid-template-columns: repeat(列数, 150px);grid-template-rows: repeat(行数, 150px);

最终觉得使用display:grid,因为他有个属性是gridRowStart可以解决定位问题
逻辑处理方案：gridRowStart: Math.abs((index % row) - row)(row:行数)。
只需要指定开始行，他就会排列整齐

1. display:grid的用法

属性	参数	定义
display: grid	块级元素
display:inline-grid	行内块元素
grid-template-columns	100px 100px 100px	总共三列，每列列宽是100px
grid-template-columns	repeat(3,100px)	重复3次，每次100px
grid-template-columns	repeat(auto-fill, 100px)	如果容器大小不固定，项目大小固定，可以用auto-fill关键字自动填充
grid-template-columns	1fr 2fr	就表示后者是前者的两倍
grid-template-columns	400px 1fr 2fr	就表示后者是前者的两倍
grid-template-rows	100px 100px 100px	总共三行，每行行宽是100px
grid-template-rows	repeat(3,100px)	重复3次，每次100px
grid-gap	5px	行、纵间距
grid-row-start	1,2,3…	行开始位置【指卡片cell】
grid-column-start	1,2,3…	列开始位置【指卡片cell】

注意：设置为grid后，子元素的float,display: inline-block,display: table-cell、vertical-align和column-*等设置都将失效。
博客链接

2.动态:before content内容

1.html 块中自定义属性：如下例 data-index
:data-index="index + 1"

<Checkbox v-for="(item, index) in emappingsObj.units" :data-index="index + 1">
	{
  
  { item.panel }}
</Checkbox>

2.css中获取该属性
content: attr(data-index);

3.完整代码：

• html

<!--:label="`${index + 1}:${item.panel}`" 是为了获取checkbox显示值和实际值-->
<div class="first-mode-card" :style="{ '--column': emappingsObj.column, '--row': emappingsObj.row }">
	<CheckboxGroup v-model="checkAllGroup">
		<Checkbox
			v-for="(item, index) in emappingsObj.units"
			:label="`${index + 1}:${item.panel}`" 
			:key=