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

Posted 2023-03-05

【中文标题】引导程序还是 CSS 网格？ - 3列等高但内容溢出[关闭]

【英文标题】：Bootstrap or CSS Grid? - 3 columns of equal height but content overflowing [closed]

【发布时间】：2019-04-14 02:48:54

【问题描述】：

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

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

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

【问题讨论】：

那么，首先，这会是响应式的吗？另外，这些元素的顺序会根据屏幕大小而改变吗？或者它会像 1, 2, 2 继续，3, 3 继续，4 ？

是的，响应式，并且会在小屏幕上重新排序到一列，从上到下按 1 的顺序排列

【参考方案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>

内容不会流动跨网格列。

【讨论】：

“必须完成”与 CSS 列 - 是强语言，我不同意....我相信你也可以用 grid 做到这一点 - 最好说 could用列完成。

如何使用网格实现这一点？并感谢您的回答，这也是响应式的吗？在一个小屏幕上，我希望它缩小到一列并向下排列（1...n）？

检查第二个 sn-p 以了解使用网格的方法。通过从columns: 1 开始，然后在所需断点将其更改为columns: 3，可以轻松地使列方法具有响应性。