html - 引导程序还是 CSS 网格？- 3 列等高但内容溢出

Question

我的目标是创建一个包含三列内容的容器。我不确定如何使用引导程序，或者 CSS Grid 是否是这样做的正确方法。

我不想创建三列，而是将一列/部分按它们的总高度分成 3，类似于下图，这样部分就会从一列溢出到另一列。

列的顺序是：1,2,3 从左到右水平，1,2,3 从上到下垂直。

标签： htmlcssbootstrap-4

Answer 1

不诉诸 JS，你所描述的必须用 CSS 列来完成。

.columns {
  columns: 3 auto;
  padding: 10px;
}

.columns,
.item {
  border: 1px solid black;
}

.item {
  margin-bottom: 10px;
}

.item1 {
  background-color: #B8B4AD;
}

.item2 {
  background-color: #D9DFE5;
}

.item3 {
  background-color: #FFB83E;
}

.item4 {
  background-color: #E86807;
}

<div class="columns">
  <div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
  <div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
  <div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
  <div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>

您只能使用 CSS Grid 实现以下目标：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 10px;
  height: 100vh;
  padding: 10px;
}

.grid,
.item {
  border: 2px solid black;
}

.item1 {
  grid-row: 1 /3;
  grid-column: 1;
}

.item2 {
  grid-row: 3/9;
  grid-column: 1;
}

.item3 {
  grid-row: 1/5;
  grid-column: 2;
}

.item4 {
  grid-row: 5/9;
  grid-column: 2;
}

.item5 {
  grid-row: 1/4;
  grid-column: 3;
}

.item6 {
  grid-row: 4/9;
  grid-column: 3;
}

<div class="grid">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

内容不会流经网格列。