Build a CSS Grid Calculator (Solution to Code Challenge #2)

Introduction

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 floats, 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 Code Challenge

The challenge was to build this calculator using CSS Grid!

The Solution

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>

Adding the Calculator Buttons

Now we have the foundation for our calculator. Let’s start adding the buttons. We’ll need:

• 10 Numbers: 0 through 9
• A clear button
• An equals button (=)
• 4 Operators: ÷, ×, −, +

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">&divide;</button>

  <button class="calc-button">7</button>
  <button class="calc-button">8</button>
  <button class="calc-button">9</button>
  <button class="calc-button">&times;</button>

  <button class="calc-button">4</button>
  <button class="calc-button">5</button>
  <button class="calc-button">6</button>
  <button class="calc-button">&minus;</button>

  <button class="calc-button">1</button>
  <button class="calc-button">2</button>
  <button class="calc-button">3</button>
  <button class="calc-button">&plus;</button>

  <button class="calc-button">0</button>
  <button class="calc-button">&equals;</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.

Quick Calculator Styling

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!

Styling the Buttons

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 */
}

Styling the Input

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!

Using CSS Grid to Position Buttons

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.

Shorthand

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.

Adding Spacing with Grid Gap

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!

Large Width Buttons

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;
}

Colored Equals Button

Add a class to your equals button and call it is-equals. Here is the CSS for that:

.is-equals {
  background: #28D060;
}

The Calculator Font

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

Conclusion

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!