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="index"
			:data-index="index + 1"
			:style="{ gridRowStart: item.gridRowStart}"
			:title="item.panel"
		>
			{{ item.panel === "skip" ? "" : item.panel }}
		</Checkbox>
	</CheckboxGroup>
</div>

• css

.first-mode-card {
	/deep/.ivu-checkbox-group {
	    display: grid;
		grid-template-columns: repeat(var(--column), 150px);
		grid-template-rows: repeat(var(--row), 150px);		
		grid-gap: 5px;
		width: 100%;
		max-height: calc(100% - 15px);
		overflow: auto;
		padding: 10px;
		// justify-content: center;
		// align-content: center;
	}
	/deep/.ivu-checkbox-group-item {
		background-color: #39b86d;
		margin-right: 0px;
		position: relative;
		text-align: center;
		line-height: 150px;
		color: #fff;
		font-weight: bold;
		border: 1px solid #3e94aa0d;
		padding: 5px 10px;
		/*文字超出省略号*/
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	/deep/.ivu-checkbox {
		display: block;
		text-align: center;
		position: absolute;
		bottom: 11px;
		left: 40%;
	}
	/deep/ label.ivu-checkbox-wrapper.ivu-checkbox-group-item.ivu-checkbox-small:before {
		content: attr(data-index);
		position: absolute;
		width: 40px;
		height: 20px;
		background: #dbedff;
		left: 0px;
		border-radius: 0 50px 50px 0;
		color: #3d4553;
		line-height: 20px;
	}
}

4.新增 display:grid 从右往左 从下往上动态渲染逻辑

getRowColPosition(item, index) {
	const { row, column, faiDirection } = this.emappingsObj;
	const allRows = parseInt(row);//总行
	const allColumns = parseInt(column);//总列

		switch (faiDirection) {
				case "LeftBottomToTop":
					return {
						panel: item,
						style: {
							background: item == "skip" ? "#ccc" : "",
							gridRowStart: Math.abs((index % allRows) - allRows),
						},
					};
				case "RightBottomToTop":
					return {
						panel: item,
						style: {
							background: item == "skip" ? "#ccc" : "",
							gridColumnStart: Math.ceil(allColumns - index / allRows),
							gridRowStart: Math.abs((index % allRows) - allRows), // Math.abs 取绝对值
						},
					};
				case "RightBottomToLeft": //从右到左，从下到上
					return {
						panel: item,
						style: {
							background: item == "skip" ? "#ccc" : "",
							gridColumnStart: allColumns - Math.ceil(index % allColumns),
							gridRowStart: allRows - Math.floor(index / allColumns), // Math.floor 向下取整
						},
					};
				case "LeftTopToBottom": //从左上到右下
					return {
						panel: item,
						style: {
							background: item == "skip" ? "#ccc" : "",
							gridRowStart: (index % allRows) + 1,
							gridColumnStart: Math.ceil((index + 1) / allRows), //Math.ceil 向上取整
						},
					};
				case "leftTopToRight": //从左到右再从右到左
					return {
						panel: item,
						style: {
							background: item == "skip" ? "#ccc" : "",
							gridRowStart: Math.floor(index / allColumns) + 1,
							gridColumnStart: (Math.floor(index / allColumns) + 1) % 2 == 0 ? Math.abs((index % allColumns) - allColumns) : (index % allColumns) + 1, //Math.ceil 向上取整
						},
					};
			}
},

LeftTopToBottom:

LeftBottomToTop:

RightBottomToTop:

RightBottomToLeft:

LeftTopToRight: