CSS Grid layout is a two-dimensional grid system designed to help web developers divide elements into columns and rows in order to create a consistent and seamless layout for web applications.
The logic behind CSS Grid is that, if a developer takes an element like a div and displays a grid in it, they can then split the element into columns and rows — collectively known as tracks — where items can be taken and placed in the grid. With CSS Grids, this can all happen without the extra work of using positioning properties (top, right, left, bottom).
There are instances where one would use CSS frameworks and others where one would use CSS Grid, but as with most things in web development, it depends on your use case.
In this article, we’ll focus on basic design using rows, columns, and areas to build a simple responsive web application using CSS Grid.
CSS Grid: Basic terminology
Let’s start by taking a few moments to understand some of the core fundamentals of CSS Grid.
- Grid container – the box that holds the grid. This is the main building block of the CSS Grid
- Grid cell – a one by one unit on a grid
- Grid area – either a single cell or multiple cells that take the form of a square or rectangle (but not an L-shape)
- Grid tracks –the collection of rows and columns, defined using
grid-template-columnsandgrid-template-rowsproperties - Grid gaps – help to create spaces on the grid. You can not have contents on or within a grid gap.
- Explicit grid – defined by you using
grid-template-columnsandgrid-template-rows - Implicit grid – defined for you by the browser
Getting started with CSS Grid
Display the grid container and elements
The grid container is the starting point for displaying a grid on an element. To get going with grid, we must first display the grid on the container using the syntax below:
display: grid;
In CSS Grid, the relationship between the grid container and its items (elements) is that of parent and children, respectively. Every grid has a container which contains items, and every element placed on a grid is a grid item.
When you make a container a grid ( display: grid;), all of its direct children become grid items automatically.
<div class="container"> <div class ="item item1">1</div> <div class = "item item2">2</div> </div> .container{ display: grid; }
But displaying items as a grid does not do much on its own. This is where other concepts like grid-template-columns and grid-template-rows come into play, as you will see in our demo app code snippet below.
Using the fr unit and repeat() notation
While we can always use fixed units of measurements like px in defining grids, CSS Grid layout also introduces a new unit of measurement called the fr unit.
The fr unit represents a fraction of the available space in the grid container and can be used to create flexible grid tracks.
Here’s an example:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
The above code snippet will split the available space into four parts: two parts will be assigned to the first track, while the remaining two parts will be assigned one track each according to the available space left. This helps ensure consistency when building your grid.
The repeat() notation also helps ensure consistency and can be used to repeat all or part of a track listing like so:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Demo: Building a web app with CSS Grid
See the Pen
Responsive Grid Demo by Charles Freeborn (@freeborncharles)
on CodePen.
I have included the complete CodePen here, but below, I will break down the code snippets with some internal comments to show how to build the web app using CSS Grid.
HTML
First, we will create a simple HTML template and fill it with some dummy text to help establish some structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Demo Responsive CSS Grid Site</title>
<link rel="stylesheet" href="/main.css">
</head>
<!-- Main body of the site where we have the container -->
<!-- this div contain all elements that will be visible on the screen -->
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main><h2>A Demo Site showcasing CSS Grid</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo libero doloremque, eum quis laudantium hic iste ab sed ipsum veniam, quam dolor rem cupiditate corrupti aliquam repudiandae officia soluta impedit!</p>
</main>
<div class="sidebar img"><h2>Find Me on Social Media</h2>
<p><a href="https://twitter.com/charliecodes">Twitter</a></p>
<p><a href="https://www.linkedin.com/in/charleseteure/">LinkedIn</a></p>
</div>
<div class="about"><h2>About </h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt voluptatem reprehenderit non. Magni sit alias quia, vel quidem autem quos optio quam at porro aliquid necessitatibus aut et eos nulla.</p>
</div>
<div class="contact"><h2>Contact</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi consequuntur magnam ipsum, commodi quam, non dolorem numquam veritatis, qui nam voluptas asperiores neque magni. Placeat, natus reprehenderit. Fugit, voluptatum commodi.</p>
</div>
<footer>Built with <3 by <a href="https://twitter.com/charliecodes">Charles Freeborn</a></footer>
</div>
</html>
CSS
Here, we will link the stylesheet (CSS) to our HTML template and implement the layout using CSS Grid. We have added some comments with the code snippets to help with clarity.
Learn more →body{
background: #F1F0EE;
margin: 0;
}
.container {
/* first, create a grid container */
display: grid;
/* define the amount and size of each column. Here we define 4 columns with equal fractions */
grid-template-columns: repeat(4, 1fr);
/* create horizontal tracks as rows and here we create 4 rows with different sizes */
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
/* define where each element will be in the grid. We achieve this with grid-template-areas */
grid-template-areas:
"nav nav nav nav"
"main main main main"
"about about about sidebar"
"contact contact contact sidebar"
"footer footer footer footer";
/* we can set gaps - gutters between the rows and columns*/
gap: 0.5rem;
height: 100vh;
font-weight: 800;
font-size: 12px;
color: #004d40;
text-align: center;
}
/* Styling the Nav starts here */
nav{
background-color: #3770F6;
grid-area: nav;
}
nav ul{
list-style: none;
font-size: 16px;
font-weight: bolder;
float: left;
}
li{
display: inline-block;
}
li a{
color: #ffffff;
}
/* Styling the Nav ends here */
a:hover{
color: #FF7F50;
}
main {
grid-area: main;
}
main h2 {
font-weight: bolder;
}
main p{
text-align: left;
}
.sidebar {
background: #D3D4D7;
grid-area: sidebar;
}
.about {
background: #D7D6D3;
grid-area: about;
}
.contact {
background: #BDBCBB;
grid-area: contact;
}
footer {
background-color: #3770F6;
grid-area: footer;
color: #ffffff;
}
footer a {
color: #ffffff;
}
a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
/* For */
@media only screen and (max-width: 550px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas:
"nav"
"sidebar"
"main"
"about"
"contact"
"footer";
}
}
CSS Grid: Key takeaways
There are many ways to achieve similar objectives in CSS. Using CSS Grid is just one way to place elements into rows and columns to design consistent, seamless web applications with user-friendly interfaces.
For more on CSS Grid, I recommend the W3 CSS Grid Layout Module and the MDN CSS Grid web docs.
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.
Is this responsive?
I don’t think so