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

Question

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

我不想创建三列，但将一列/节按其总高度分成3个，类似于下图，因此该节将从一列溢出到另一列。

列的顺序为：水平方向从左到右分别为1,2,3和垂直方向为从上到下分别为1,2,3。

Answer 1

在不使用JS的情况下，您要描述的内容必须使用CSS列完成。

Bill <input id="bill" type="number" />
Split <input id="split" type="number" />
Service <select id="service">
  <option value="good">Good</option>
  <option value="ok">Bad</option>
  <option value="bad">ok</option>
</select>
<button type="calculate">Calculate</button>
<div id="result"></div>

.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;
}

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

<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>

.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;
}

内容不会跨网格列流动。