css - css 可调整大小的 div 位置不同的大小

Question

嗨，我正在尝试制作一个页面，其中我有 x 个 div，它们可以使用 bootstrap col (col-2..-12) 水平调整大小，垂直没有限制。我可以随时添加更多 div

如果输入，我想将 div 放在前一个之后，如果不传递到下一行。您可以在示例下方看到，但可以是任何大小，这里 div 2 调整大小，因此 div 6 必须向右移动。

有什么办法可以在css中做到这一点？谢谢你。

标签： cssbootstrap-4gridresizeposition

Answer 1

您可以使用grid布局来实现这种布局：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div class="row-span">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>