In this tutorial I will go through and show you how easy it is to create a 4 column grid footer layout for a website.
The CSS grid layout is relevantly new and is the modern way of implementing responsive rows and columns in CSS for your website layouts, without using frameworks such as Bootstrap, tailwind, Foundation and so on.
Here’s an example of what we will be building in this tutorial, showing you the desktop, iPad and mobile screen size views of the CSS grid footer menus.
The iPad view of the CSS grid footer menu.
The mobile view of the footer menu.
CSS Grid Footer
First we start with the HTML, within the body tag. We have a footer element and a div tag that wraps around the four sections.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid Footer Menu</title>
</head>
<body>
<h1>FOOTER CSS GRID</h1>
<footer id="footer-main">
<div class="footer-grid">
<section class="footer-1">
<h4>Services 1</h4>
<p>Our Service a</p>
<p>Our Service b</p>
<p>Our Service c</p>
<p>Our Service d</p>
</section>
<section class="footer-2">
<h4>Services 2</h4>
<p>Our Service a</p>
<p>Our Service b</p>
<p>Our Service c</p>
<p>Our Service d</p>
</section>
<section class="footer-3">
<h4>Services 3</h4>
<p>Our Service a</p>
<p>Our Service b</p>
<p>Our Service c</p>
<p>Our Service d</p>
</section>
<section class="footer-4">
<h4>Services 4</h4>
<p>Our Service a</p>
<p>Our Service b</p>
<p>Our Service c</p>
<p>Our Service d</p>
</section>
</div>
</footer>
</body>
</html>
Overview, we first set the footer tag with an id of “#footer-main”, which is the whole section of the footer, just for styling. Followed by adding a div with a class of “.footer-grid” which wraps around all the four coloured section elements of the layout.
Four column CSS grid layout
As you can see the div class “.footer-grid” is where the magic happens, the parent div. We first wrap around all the sections we want to set as a grid layout.
The “grid-template-columns” is set with a minmax width of 200px to each column to automatically fit each fractional unit (1fr) across the row. Pretty simple ha. Need more columns? Simply just copy and paste a new section within the “.footer-grid” it’s that easy.
Furthermore, we’ve added some margin and padding to tidy some things up within the “footer-grid” div as well as a media query to help with smaller screens. You could modify these styles as you see fit.
The CSS file
styles.css
#footer-main {
background-color: #f8f8f8;
border: solid 1px #333;
padding: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
margin: 0 auto;
max-width: 100%;
padding-left: 180px;
}
@media (max-width: 1024px) {
.footer-grid {
padding-left: 20px;
}
}
/* --------------------------
---------- Colour styles -----------
---------------------------*/
section .footer-1 {
background-color: #bc27c4;
}
section .footer-2 {
background-color: #1e11d6;
}
section .footer-3 {
background-color: #44ed0b;
}
section .footer-4 {
background-color: #ef0b35;
}
section {
color: #fff;
padding:20px;
}
h1{
text-align:center;
margin:80px 0;
}
h4 {
font-size:1.2rem;
}
Try out the CSS grid playground and learn more about the fundamentals I would suggest this website you get more of a visual, drag and drop approach while also getting the code needed to use on your project.
To get all the source code for this tutorial please visit my codepen
To check out “How to add CSS Grid Navigation Menu” to your website here.
Hope this helps you to build your next responsive footer menu using CSS grid, and thanks for visiting the website.