This tutorial is out of date and no longer maintained.
Last Friday, we put out our second ever code challenge. It was a good way to get a little coding practice in over the weekend with a concept that is fairly new, CSS Grid Layout.
Before CSS Grid, we’d have to focus on using float
s, display: inline-block
and all manner of moving elements around. Thanks to new properties like grid-template
, grid-gap
, and grid-column
/grid-row
, we can write this calculator in very few lines of code.
Let’s walk through the solution and see how we can build this layout quickly and easily thanks to CSS Grid. If you want a primer on CSS Grid, check out our other article: Getting Started with CSS Grid Layout
The challenge was to build this calculator using CSS Grid!
I’ll be working within a CodePen for this tutorial. I’ve also made a video for those that like the video format.
https://www.youtube.com/watch?v=9PzkWxleT5E
We’ll start out this solution by focusing on the HTML. We’ll wrap everything in a calculator
class:
<div class="calculator">
<!-- the input -->
<input type="number">
<!-- the buttons -->
<div class="calculator-buttons">
<!-- buttons go here -->
</div>
</div>
Now we have the foundation for our calculator. Let’s start adding the buttons. We’ll need:
We can add them in the order they’ll appear:
...
<!-- the buttons -->
<div class="calculator-buttons">
<button class="calc-button">C</button>
<button class="calc-button">÷</button>
<button class="calc-button">7</button>
<button class="calc-button">8</button>
<button class="calc-button">9</button>
<button class="calc-button">×</button>
<button class="calc-button">4</button>
<button class="calc-button">5</button>
<button class="calc-button">6</button>
<button class="calc-button">−</button>
<button class="calc-button">1</button>
<button class="calc-button">2</button>
<button class="calc-button">3</button>
<button class="calc-button">+</button>
<button class="calc-button">0</button>
<button class="calc-button">=</button>
</div>
...
Notice I’ve added some line-breaks and spacing for clarity. We have put line breaks where we visualize our grid rows will take place.
Our calculator will look nothing like a calculator at this point:
Let’s add some quick styling so that we’re not working with some really unstyled and ugly buttons. First, the overall calculator styles:
/* quick reset so all our padding is the right size */
* {
box-sizing: border-box;
}
/* add some spacing */
body {
background: #F6F6F6;
padding-bottom: 30px;
padding-top: 30px;
}
/* limit the width and center */
.calculator {
max-width: 400px;
margin: 0 auto;
border: 2px solid #111;
border-radius: 5px;
}
Slowly but surely, we are moving along!
We’ll quickly style the buttons before we get onto the CSS Grid fun. We’ll be adding CSS for the individual buttons but we won’t deal with the .calculator-buttons
container yet. That’s where all the CSS Grid magic will happen. This will just be for quick styling.
.calc-button {
background: rgba(0, 0, 0, 0.5); /* light background with opacity 50% */
border: 1px solid #111; /* black border */
padding: 20px;
color: #EEE; /* white text */
border-radius: 5px; /* rounded corners */
font-size: 22px; /* larger fonts */
cursor: pointer; /* make it look clickable */
}
The input will take a few styles to get it to match our calculator now:
.calculator input {
/* reset basic form styles */
background: none;
border: none;
box-shadow: none;
outline: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid #111;
color: #333;
text-align: right;
font-size: 40px;
border-radius: 0;
}
Now we have our input and buttons looking good!
The last part of our calculator may just be the easiest part. We’ll use the CSS Grid to position our buttons. To use CSS Grid Layout, we just have to define the layout we would like on our parent element; in this case, the .calculator-buttons
div.
Feel free to play around with these numbers, but we’ll start by creating our four columns.
.calculator-buttons {
/* small spacing within our container */
padding: 20px;
/* the grid stuff! */
display: grid;
/* create 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
We have declared display: grid
to make sure this container is a grid. Next we define the four columns we want using the fr
(fractional unit).
This means that CSS will create the columns with equal widths. This means each of our four columns will be 25% width.
We don’t even have to define the number of rows here. The elements will keep moving to new rows until they are all placed.
One thing to note is that CSS Grid comes with the repeat()
function that allows us to not have to write out all columns and rows. The above can be refactored to:
grid-template-columns: repeat(4, 1fr);
This is very helpful when you want to create many columns.
Our buttons are sitting right next to each other, but we need to add some spacing to them to make it look like an actual calculator.
To add a gap, we can use the following:
.calculator-buttons {
...
/* add the grid gap */
grid-gap: 15px;
}
Now our calculator buttons have spacing!
For our larger C
(clear) and 0
buttons, we can easily make them span across multiple columns by targeting them specifically. Let’s target each individually because we also want to change their colors out. This could be done with one CSS class if you wanted and it could be called span-3
or something along those lines.
Here we’ll create an is-clear
and is-zero
class for each button. Go ahead and add those to your HTML. Then we can add these CSS classes:
/* span across 3 columns */
.is-zero,
.is-clear {
grid-column: span 3;
}
/* go blue */
.is-clear {
background: #3572DB;
}
Add a class to your equals button and call it is-equals
. Here is the CSS for that:
.is-equals {
background: #28D060;
}
The last sprinkle of styling we’ll add that gives this calculator that extra bit of pizazz is the font. Head on over to fonts.google.com and browse around for a good Monospace font you like. I’ve settled on Space Mono for my calculator.
Add the @import
to the top of your CSS and add font-face
to the .calculator input
and the .calc-buttons
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
.calculator input,
.calc-button {
font-family: 'Space Mono';
}
Our calculator is done!
https://codepen.io/sevilayha/pen/jZmpwx
I hope you enjoyed that quick lesson on CSS Grid and the Code Challenge. Let me know in the comments if you’d like us to continue doing these Weekend Code Challenges and posting the solutions on Mondays.
Happy coding!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.