<div class="container flexbox">
  <div class="column">
    <div class="element">
      <p> Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>

    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container grid">
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>

    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container flexbox col-3">
  <div class="column">
    <div class="element">
      <p>flexbox col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>

<div class="container grid col-3">
  <div class="column">
    <div class="element">
      <p>grid col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.</p>
    </div>
  </div>
  <div class="column">
    <div class="element">
      <p>Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.</p>
    </div>
  </div>
</div>
$col_gap: 1rem;

* {
  box-sizing: border-box;
}

body {
  font-family: "Baloo 2", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  min-height: 100vh;
  display: grid;
  justify-content: center;
  grid-gap: 2rem;
}

p {
  margin: 0;
}

.container {
  padding: 1rem 0;
  max-width: 80ch;
  margin: 0 auto;
  box-shadow: inset 0 0 0 2px #ccc;
}

.column {
  margin: $col_gap;
  background-color: #ccc;
}

.element {
  padding: 0.5rem;
  background-color: rebeccapurple;
  color: #fff;
}

.flexbox {
  display: flex;

  // Ensure content elements fill up the .column
  .element {
    height: 100%;
  }

  &.col-3 {
    // Explicitly needs defined to wrap overflow items to the next virtual row
    flex-wrap: wrap;

    .column {
      margin: $col_gap/2;
      max-width: calc((100% / 3) - #{$col_gap});
    }
  }
}

.grid {
  display: grid;
  // Essentially switch the default axis
  grid-auto-flow: column;

  // Ensure content elements fill up the .column
  .element {
    height: 100%;
  }

  &.col-3 {
    grid-gap: $col_gap;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: unset;

    .column {
      margin: 0;
    }
  }
}
View Compiled
// Learn more:
// @link https://moderncss.dev/equal-height-elements-flexbox-vs-grid/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.