如何将两个网格彼此相邻答案

【问题标题】：how to place two grids next to each other如何将两个网格彼此相邻
【发布时间】：2021-11-09 17:37:55
【问题描述】：

我正在尝试移动正方形旁边的矩形。由于其中 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 上的东西，但我没有组合使它起作用。

【问题讨论】：

你必须改变结构。网格不要那样换行

标签： css css-grid

【解决方案1】：

不要将网格列应用于子级，将其应用于父级并告诉矩形跨越 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>

【讨论】：

【解决方案2】：

您也可以将outer 设为网格...这样两个容器就可以共享同一个单元格。

但是您希望元素如何包装？

示例：

.outer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.square,
.rectangle:before {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: auto;
}

.rectangles {
  display: grid;
  grid-column: 1/-1;
  grid-row: 1;
  grid-template-columns: repeat(6, 1fr);
}

.rectangles::before {
  content: '';
}

.square,
p {
  height: 50px;
  border: solid;
  margin: 3px;
}

p {
  grid-column: auto / span 2;
}

.square {
  aspect-ratio: 1/1;
  margin-inline: auto;
  display:flex;
  justify-content:center;
  font-size:3em;
  line-height:0.8;
  color:red; 
}

<div class="outer">
  <div class="square"> - </div>
  <div class="rectangles">
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
    <p>rect</p>
  </div>
</div>

【讨论】：