Which is better: Bootstrap or CSS Grid for creating 3 columns with equal height and overflowing content?

Question

Which is better: Bootstrap or CSS Grid for creating 3 columns with equal height and overflowing content?

I am trying to figure out the best way to create a container with three columns of content. I can't decide if using bootstrap or CSS Grid would be most effective.

Instead of having distinctly separate columns, I would like one continuous column that is divided into three sections stacked on top of each other vertically, similar to the example image provided below. This way, the content will flow seamlessly from one section to the next.

The order of the sections should be as follows: 1,2,3 from left to right horizontally and then 1,2,3 from top to bottom vertically.

https://i.sstatic.net/X9Nhx.jpg

html css bootstrap-4

Answer 1

Answer №1

To achieve the desired layout without using JavaScript, CSS columns must be utilized.

.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... (content continues) </div>
  <div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit... (content continues)</div>
  <div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue... (content continues)</div>
  <div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus... (content continues)</div>
</div>

With CSS Grid, achieving a similar layout is possible:

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

It's important to note that content won't seamlessly flow across grid columns.

Answer 2

To achieve the desired layout without using JavaScript, CSS columns must be utilized.

.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... (content continues) </div>
  <div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit... (content continues)</div>
  <div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue... (content continues)</div>
  <div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus... (content continues)</div>
</div>

With CSS Grid, achieving a similar layout is possible:

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

It's important to note that content won't seamlessly flow across grid columns.

Which is better: Bootstrap or CSS Grid for creating 3 columns with equal height and overflowing content?

Answer №1

Similar questions

What causes the styling to break in my CSS media query implementation?

My customized portfolio incorporates Bootstrap 4 and integrates a modal for collecting feedback. I am looking for a way to gather visitor feedback directly into a Google Sheet without relying on Google Forms

The shopping cart is unable to display the name property as it is undefined

How can I maintain the

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

Ways to position <label> and text next to each other in HTML

CSS: concealing certain portions of an element's content

What could be causing my function to execute thrice?

Put the SVG at the lower right corner of the image using Bootstrap

Angular's browser animation feature allows for smooth slide-up animations from the bottom

I am attempting to draw a correlation between two numerical variables

Matching Javascript Variables to CSS Styles

Hiding a related field using a designated delimiter can be achieved with JavaScript

Updating the default date in Bootstrap datetimepicker can be done through the use of a Bootstrap modal. Here

Using JS/PHP to send a POST request to a PHP script for querying a database

show data rows in the form of boxes

JavaScript code to modify a table row

Selecting Specific File in Directory Using HTML File Input

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

The image fails to reach full width and does not expand correctly when I zoom out