如何实现容器封装元素的无缝网格（每行固定4个元素）

问题核心是多个container容器阻断了元素的连续布局，我们可以通过让容器“消失”的方式，让所有element直接受外层网格容器控制，实现无缝衔接的每行4元素布局。

方案一：使用CSS Grid（推荐） #

修改CSS代码如下：

.element {
  width: 30px;
  height: 30px;
  border: 1px solid black;
}

.container {
  /* 让容器不生成布局盒子，子元素直接成为grid的子元素 */
  display: contents;
}

.grid {
  width: 150px;
  /* 定义每行固定4列，每列宽度30px */
  display: grid;
  grid-template-columns: repeat(4, 30px);
  /* 设置元素间的间距 */
  gap: 5px;
}

方案二：使用Flexbox #

如果坚持用Flexbox实现，同样可以通过display:contents达成效果：

.element {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  /* 防止元素被挤压变形 */
  flex-shrink: 0;
}

.container {
  display: contents;
}

.grid {
  width: 150px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

原理说明 #

display: contents的作用是让container容器本身不生成任何布局盒子，它的子元素（即所有element）会直接被当作外层grid容器的子元素处理，完全忽略中间container的存在，所有元素会按照外层容器的布局规则连续排列，完美解决跨容器的换行衔接问题。

内容的提问来源于stack exchange，提问作者OddBrew