css 多行多列布局

原创已于 2023-10-05 10:51:34 修改 · 818 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-10-04 12:18:19 首次发布

前端同时被 3 个专栏收录

31 篇文章

订阅专栏

web

31 篇文章

订阅专栏

css

2 篇文章

订阅专栏

博客提及CSS布局有多种方式，但其他方式存在问题需自行解决，认为display: grid是目前最合适的，还给出了第二种方式column - count。

也有其他方式，不过其他方式或多或少存在问题需要自行解决。display: grid;是目前个人觉得最合适的

直接出代码：

.item-block {
	display: grid;
	column-gap: 16rpx; // 设置间距
	grid-template-columns: 220rpx 220rpx 220rpx; // 设置列宽
    grid-template-rows: 220rpx; // 设置行高
	row-gap: 16rpx; // 设置行间距
}

第二种：

column-count

.use-card {
	margin: 0 30rpx;
	margin-top: 26rpx;
	column-count: 3;
	column-gap: 14rpx;
}

.card-item {
	break-inside: avoid; // 最后剩余不满一行给子元素加break-inside可以防止错乱
	display: flex;
	flex-direction: column;
	align-items: center;
}