CSS grid layout makes your life so much easier to create website layouts. This module is native to the browser, so you don’t have to import anything. The footer of this blog is actually using CSS grid layout.

This is the layout of the footer.

Default size

Device width smaller than 525px

<footer>
	<div className="contact-email">
		<a> contact@thetechgeek.io </a>
	</div>
	<div className="footer-header">
		<span> Made with love in Montreal </span>
	</div>
	<div className="author">
		by  Edward
	</div>
</footer>

This is the style of the footer

footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
	.author {
		text-align: right;
	}
}

@media screen and (max-width: 525px) {
  footer {
    grid-template-rows: repeat(2, 1fr);
    .author {
      grid-column-start: 3;
    }
    .footer-header {
      grid-row: 2 / 3;
      grid-column: 1 / -1;
    }
  }
}

As you can see from the style, the display property of the footer is a grid which contains by default 3 columns of 1 fraction (fr) each as unit. If the device width was 600px, each column would occupy 1 fraction worth of the maximum width which is 200px for this case.

If the device width is smaller than 525px, the grid of the footer will have two rows of 1 fr each. The grid is now composed of 4 vertical lines and 3 horizontal lines. It is important to understand the number of horizontal and vertical lines in the grid to get the grid-column-start, grid-row and grid-column properties.

Here is the grid of the footer with the lines.

The footer with default size has by default 4 vertical lines and 2 horizontal lines.

On smaller devices, the author is placed in the grid where its element’s left side touches the 3rd vertical line of the grid. There exists also a grid-column-end property which specifies where the element’s right side should touch in the grid.

For the case of the element with the class named footer-header, it takes the full height of the 2nd row (between horizontal line 2 and 3) and takes the whole space of that row (from vertical line 1 to -1). -1 is basically a shortcut to say the last line.

As you probably already noticed it, grid-row and grid-column properties are short forms to define the row start/end or column start/end.

CSS grid is supported on most of the modern browsers (87.29%). You can find out more here

If you want to learn more about the CSS grid module. Here’s a free tutorial.