Building a Website Footer

The footer is located at the very bottom of a webpage. It typically contains copyright information, secondary navigation links, and social media icons. We can build a robust, automatically-responsive footer using HTML and CSS Grid.

Because the footer is often the final piece of content a user sees, it's important to make it organized and easy to read. A common design pattern is to split the footer into three or four columns of links, with a copyright bar running across the bottom.

The Semantic HTML

Modern HTML provides the footer tag specifically for this purpose. Inside the footer, we can create a grid container to hold our columns of secondary links:

Responsive Columns with CSS Grid

The most elegant way to style these columns is using CSS Grid. Instead of writing complex media queries, we can use the auto-fit and minmax functions:

This tells the browser to make the columns at least 200px wide. If there's enough space, fit them all on one row. If the screen is too small, automatically stack them.

Full Working Example

Below is a complete, beautifully styled footer featuring three columns and a copyright boundary. Notice how the links change color when hovered, providing excellent user feedback. Resize your window to see the columns automatically stack: