[Solved] Bootstrap or CSS Grid? – 3 columns of equal height but content overflowing [closed]

by


Without resorting to JS, what you are describing must be done with CSS columns.

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

You could only achieve something like the following with 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>

Content would not flow across a grid columns.

3

solved Bootstrap or CSS Grid? – 3 columns of equal height but content overflowing [closed]