How can I build the layout below using grid display in HTML

March 25, 2022

I’ve been trying to practice HTML and I was wondering how could I design the layout to be like the one on the image.

Top row is where my navigation would be.
Main row left is to be left empty or populated by other links
Main row right is where the main content would show up
Bottom row is my footer.

>Solution :

If you would like to create such layout, you can let the main container having the grid layout when leaving the others as it is. Here’s a simple sample snippet you may try.

div {
  border: 1px solid #000;
}

.top-row, .bottom-row {
  width: 100%;
}

.main-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
}

<div class="top-row">Top</div>
<div class="main-row">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="bottom-row">Bottom</div>

The above snippet applied the grid-template-columns to divide the .main-row so the left column will have one-third (1/3) width of the screen and the right column will occupy the rest (2/3). It uses fr as the fraction measurement. You can also do the experiment with auto for this.