<!-- Column #1 -->
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.