时间戳

首页 > 解决方案 > 如何将两个网格彼此相邻

css - 如何将两个网格彼此相邻

问题描述

网格 我正在尝试移动正方形旁边的矩形。由于其中 3 个不适合，我只希望其中 2 个放在它旁边，其余的矩形放在下面的行上。

到目前为止，我有以下内容：

<div class="outer">
  <div class="square"></div>
  <div class="rectangles"> rectangles go in here </div>
</div>

.outer {

}

.square {
  grid-template-colums: 'repeat(12, 1fr)'
}

.rectangle {
  grid-template-colums: '4fr 4fr 4fr'
}

我怀疑这是外部 div 上的东西，但我没有组合使它起作用。

标签： csscss-grid

解决方案

不要将网格列应用于子级，将其应用于父级并告诉矩形跨越 4 列。

然后展平结构以移除矩形包装。

.outer {
  display: grid;
  grid-template-columns: repeat(12, 8vw);
  margin: 1em;
}

.outer * {
  height: 8.333vw;
  border: 1px solid red;
}

.square {
  width: 8.333vw;
  justify-self: center;
}

.rect {
  grid-column: span 4;
}
<div class="outer">
  <div class="square"></div>
  <div class="rect"></div>
  <div class="rect"></div>
  <div class="rect"></div>
  <div class="rect"></div>
  <div class="rect"></div>
</div>

推荐阅读