Basic html and css page grid layout example

Two column page layout

Lets see a simple example on how to divide an element in two columns. We will use a div element with a class of "page", and inside we will have another two div elements. The div element in line2 will be our left section, and the div element in line 3 will be our right section.

<div class="page">
	<div> Left section </div>
	<div> Right section </div>
</div>

In the css code we are going to target the page in line 1, and in line 2 we are going to set the display property to grid. When we do this, the page element becomes a grid container, and all children inside the container are becoming grid items.

.page{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
}

• In line 3 we use the grid-template-columns property to turn every child inside the container to a column. The grid-template-columns property takes as value the width we like to give to the columns.
  1fr (1 fraction), means that the column will take up the whole width of the grid container. In our case here we are setting both columns to 1fr, that means that every column will take up the half container width. So the header will be divided in two sections with equal width.
• In line 4 we have the grid-column-gap property in which we set a margin, or a gutter if you like, between the two columns.

The result:
The element with the green border is the page element, and inside we have the two div tags.

Setting different widths

Let's turn the left section to a sidebar by reducing its width.
We can change the width of the left column by changing the first value of the grid-template-columns property. We can use the fraction unit to set decimal values like 0.5fr.

grid-template-columns: 0.5fr 1fr;

We can also use fixed widths with pixels. Here we are setting the left column's width to 200px.

grid-template-columns: 200px 1fr;

Adding a footer to the two columns page layout

Lets add a footer below the two columns which will occupy the whole container's width. In line 4 we insert another div element and we give it a class of "footer". Also this time we gave a class of "left" to the first div, and a class of "right" to the second div. We are going to use the elements class names to arrange our grid layout.

<div class="page">
	<div class="left"> Left section </div>
	<div class="right"> Right section </div>
	<div class="footer"> bottom row </div>
</div>

Our stylesheet now looks a little bit different. Let's explain what is going on here. I will skip the .page rule and go to line 11 where we are targeting the left classname and set the grid-area property value to left. We can set it to any name we like, but it's good practice to set a descriptive name.
So what does it mean?. It means that we can move the element around inside the grid container and place it anywhere we like. Now we do the same thing with the right element in line 14, and the footer element in line 17.

.page{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-areas: 
		"left right"
		"footer footer"
	;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
.left{
	grid-area: left;
}
.right{
	grid-area: right;
}
.footer{
	grid-area: footer;
}

• Now let's go to the page rule and in line 4, and explain the grid-template-areas property that we added there. With the grid-template-areas property we can target the elements, that have a "grid-area" property, and arrange them inside the grid template.
• We know that we have a two column layout as we are stating in line 3 with the "grid-template-columns" property.
• In line 5 and 6 we have two lines of code. Those two lines are representing our layout.
  In line 5 we are placing the element with the grid-area: left value to the left side, and on the right side we have the grid-area: right element.
  

  	"left right"
  	"footer footer"
  		

  And in line 6 we place to both columns the grid-area: footer element. That means that the footer will span the whole row.

The result:
We see in the first row the two columns layout, and in the second row we have the footer element that spans the whole width.

Adding a navigation and a header above the two column layout

We are adding a new div element with a class of nav in line 3.
And a div element with a class of header in line 2.

<div class="page">
	<div class="header"> <h1>The header</h1> </div>
	<div class="nav">Navigation</div>
	<div class="left"> Sidebar </div>
	<div class="right"> Right section </div>
	<div class="footer"> Footer </div>
</div>

Now we have to add the navigation and the header in the css file. I line 6 we place the nav element in both columns, and we do the same thing with the header element in line 5.
In line 11 we defining a grid-area value of nav, to the navigation, and we do the same thing with the header in line 14.

grid-template-areas: 
	"header header"
	"nav nav"
	"left right"
	"footer footer"
;

.nav{
	grid-area: nav;
}
.header{
	grid-area: header;
}

The result:
And as we see we have the layout that we expected to have.

Changing the order of the elements

I like to use the grid-template-areas property because we can change the order of the elements without any changes in our html code. In the css that follows we place the navigation in the top, and everything else follows.
When we look at the grid-template-areas property, we can see the whole page's structure.

grid-template-areas: 
	"nav nav"
	"header header"
	"left right"
	"footer footer"
;

The result:
We see now that we have our navigation on top of the header element.

Turning the footer to a four column grid container

Let's do a last change to our layout and change the footer to a grid container and divide it to four columns with equal width. To do this we have to add four div elements insider the footer.

<div class="footer">
	<div>First</div>
	<div>Second</div>
	<div>Third</div>
	<div>Fourth</div>
</div>

In the footer rule, we have to add the display property and set it to grid in line 19.
In line 20 we use again the grid-template-columns property but this time we use as a value the css repeat() function.
The function takes two arguments. With the first argument we are telling the grid how many columns we want. And in the second argument we defining the width of the columns. Here we are saying that we want four columns with equal width.

.footer{
	grid-area: footer;
	display: grid;
	grid-template-columns: repeat(4, 1fr); // the same as "1fr 1fr 1fr 1fr"
	grid-column-gap: 10px;
}

The result:
We see our footer that has a red border, and inside we have our four equal width columns.

Summary

In this tutorial we saw how to use the css grid system to structure a page layout. We learned how to use the grid properties to arrange the elements in the page to achieve the design we want.

We saw how to use the grid-template-columns property to set the desired columns width, and the grid-template-areas property to structure the elements.

I hope you find the article interesting and helpful.
Thanks for reading.
Please leave a comment if you find any errors, so i can update the page with the correct code.

Buy me a coffee