- What we’ll be building
- Getting Started
- The Markup
- Basic CSS Reset
- Basic Calculator Styles
- The Calculator Screen
- Styling the buttons
- Using CSS Grid to arrange the buttons
CSS Grid is a new way of defining the structure of a webpage. It helps developers create complex layouts on the web easily without resulting to old methods such as floats or complicated frameworks which introduced all sorts of problems.
The introduction of Grid provides a system of laying out webpages that is native to web browsers and even more powerful than what you can achieve with CSS Frameworks such as Bootstrap.
In this tutorial, we will explore some of the benefits that Grid has to offer by building a simple calculator layout.
You need to have some experience with CSS before taking this tutorial as I won’t be explaining the basics of CSS. I will only concentrate on the parts that are relevant to Grid layout.
To be sure, everything will still work if you decide to use Chrome. It’s just that the developement experience is much nicer in Firefox at this point in time.
What we’ll be building
I will demonstrate how you can build a simple calculator layout with CSS Grid. Here’s the live demo of the finished calculator.
I will also explain the most common terms used in Grid land, and how to use the Firefox Grid Inspector to inspect and visualise your Grid layout.
You can find the starter files for this tutorial on JSFiddle. It contains all the necessary markup to build the calculator layout.
Start by forking the code to a new fiddle and follow along by typing each step out all the way to the end. Feel free to do this tutorial on another online playground or on your local machine if you prefer.
Our calulator layout has two parts: the screen and the keys. The screen will span the full width of the calculator but it’s the keys where we’ll need to use CSS Grid since they’re arranged in a grid format.
Basic CSS Reset
I like to start my web projects with the following CSS reset:
This sets the
padding of every HTML element to zero and the
box-sizing: border-box; declaration changes the box model by ensuring that the padding and border of an element no longer increases its width.
Basic Calculator Styles
Add the following styles below the reset to absolutely center the calculator on the page and give it a border and fixed width.
The Calculator Screen
Style the calculator screen as follows:
Styling the buttons
Add the following styles for the individual buttons to improve their look a bit. I have styled the operators, All Clear and Equals button differently from the others to add some distinction.
We’ll get to the
.calculator-keys container in the next section which is where all the CSS Grid work will happen.
Using CSS Grid to arrange the buttons
Now to the fun part. We need to setup the
.calculator-keys container to use Grid layout:
Any element that has its
display property set to
grid is known as a grid container. The direct descendants of the grid container are known as grid items. In this case, the
button elements inside
.calculator-keys are the grid items.
The result is that each grid item takes up the full width of the grid container. Although not the result we are looking for, this is a good start. Soon, I’ll show you how to define rows and columns in the grid container.
Before that, let’s explore how Firefox’s DevTools can make our lives easier when creating layouts with CSS Grid.
Examine Grid Layouts with Firefox DevTools
Open the Firefox DevTools using Ctrl+Shift+I in Windows and Linux or Cmd+Opt+I in macOS. Inside the Inspector pane, check out the Layout section which lists all the Grid containers on the page.
div.calculator-keys grid container we just created. This draws a grid overlay around the grid container to help you visualise the layout. With the overlay activated, any changes to the grid will be easy to see.
Here, you can see that we have a single column in our grid and the number of rows correspond to the number of grid items (buttons) present in the grid container.
Defining Rows and Columns
We can define rows and columns for a grid container using the
grid-template-columns properties. For our calculator layout, we need to place the keys in four columns of equal width.
fr unit is a new form of measurement in CSS. It represents a fraction of the available space in a grid container. So
1fr means 1 part of the available space,
2fr means 2 parts, and so on.
Here, we’ve created four columns with each one taking 1 part of the available space. So each column will have the same width regardless of the size of the grid container.
We can also use the
repeat keyword to define the number of columns like this:
Now, each button takes a single column with additional rows created as needed.
Space out the buttons
We need to add some space between the butttons. This can be achieved using the
grid-row-gap properties on the grid container.
Now, we have an equal-sized gutter between the columns and the rows. Note that this gutter is not present along the edge of the grid container.
We can use the
grid-gap property as a shorthand for both
grid-row-gap like this:
grid-gap: 20px 20px. The first value specifies the
grid-row-gap while the second is the
grid-column-gap. Since they’re the same value, you can just write
Let’s also add some space between the buttons and the edges of the grid container as well as the calculator screen. We can do this by setting a padding on
We’re getting there, but the calculator doesn’t look right yet. We need to move the Equals button to
Row 2 / Column 4 and make it span four rows.
CSS Grid provides an easy way to do this using a handful of properties which we’ll examine in the next section.
Positioning the Equals Button
There are a couple of ways to put an element in a specific position on the grid. We will use grid lines to achieve what we want.
Grid lines are the dividing lines between the columns and the rows. If you inspect
div.calculator keys using the Firefox Grid Inspector with the Display line numbers option turned on, you will see that we have grid lines numbered from 1 to 5 for the columns and 1 to 6 for the rows (see previous screenshot).
We can use this representation to place the Equal sign where we want it to be. The properties to use are
Let’s see how they work in turn. In your CSS, add the
grid-row-start property to the
We have specified that the Equal sign be moved to the second grid line on the row. Since we want it to span to the last row (line 6), we’ll set the
grid-row-end to 6. Also set the
height to 100% so that the button stretches all the way to the end of the container.
Now, we have something that resembles what we are looking for, but the Equals sign is on the wrong side of the calculator. We need to move it to the last column between grid lines 4 and 5.
Here’s how to do that:
Tada! Now our calculator looks good to go.
We can also use
grid-column as a shorthand for
Furthermore, these two properties can be combined into one using the
grid-area is a shorthand for
grid-column-end in that order.
That concludes my tutorial. I hope it has helped you learn the basics of CSS Grid and how you can use it to build layouts on the web.
Grid has several other attributes that make it easier to design page layouts which I did not cover in this article. Rachel Andrew and Jen Simmons, both Grid experts, have collated tons of resources on the subject on their respective sites. CSS-Tricks also has a comprehensive guide to grid that goes into a lot more detail on each property and value.