A two-column web layout using CSS Grid module

Featuring Equal, auto-heighted columns

This page is one of the demonstrations for the article Equal-height columns with CSS.

Flawless equal-heighted columns built using CSS Grid module properties like grid-template-columns and grid-column-gap.

Markup would be as simple as below:

<div class="g-grid">
  <div class="g-grid-col g-content">
  </div>
  <div class="g-grid-col g-content">
  </div>
</div>

CSS too, won’t be complicated at all:

.g-grid {
  display: grid;
  grid-template-columns: calc(65% - 1rem * 1/2) calc(35% - 1rem * 1/2);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.g-grid-col {
  padding: 1rem;
}

If it was helpful, feel free to share it with others and follow us to stay updated on more stuff like this.