Create a macOS calculator layout

Here's what we'll cover:

• Learn how to adjust the placement of a grid item using the grid-column property.

The macOS Calculator app is a simple but powerful tool that has been included with every Mac for many years. It lets you do basic arithmetic functions like addition, subtraction, multiplication, and division. The app's interface is clean and user-friendly, which makes it a go-to tool for anyone needing quick calculations.

In this post, we'll explore how to create a macOS calculator layout using HTML and CSS. To make it fully functional, we'll need JavaScript to implement the real calculator. But we'll skip this part and focus solely on creating the layout.

Before we get into the details, here's the final layout we'll be creating:

HTML markup

The calculator is constructed using various elements, including a div element to display the result and several buttons that allow users to interact with it.

<div class="calculator">
    <div class="calculator__result">0</div>

    <button class="calculator__key">C</button>
    <button class="calculator__key">+/-</button>
    <button class="calculator__key">%</button>
    <button class="calculator__key">÷</button>

    <button class="calculator__key">7</button>
    <button class="calculator__key">8</button>
    <button class="calculator__key">9</button>
    <button class="calculator__key">x</button>

    <button class="calculator__key">4</button>
    <button class="calculator__key">5</button>
    <button class="calculator__key">6</button>
    <button class="calculator__key">-</button>

    <button class="calculator__key">1</button>
    <button class="calculator__key">2</button>
    <button class="calculator__key">3</button>
    <button class="calculator__key">+</button>

    <button class="calculator__key">0</button>
    <button class="calculator__key">,</button>
    <button class="calculator__key">=</button>
</div>

It's all pretty straightforward. We've added div and button elements in the order they appear on the calculator, from top to bottom and left to right.

The result element has the calculator__result class, while all the buttons have the calculator__key class.

Creating a grid

Let's talk about how to create a grid layout for our calculator. Imagine the calculator as a grid of 4 columns and 6 rows. To make this happen, we use the display: grid property which sets the root element as a grid container. Then, we can define the number of columns and rows in our grid using grid-template-columns and grid-template-rows.

To keep things simple, we use the repeat() function to set up our grid without having to manually specify each column or row. In this case, we want a grid with 4 columns, each with a width of 4rem, and 6 rows, each with a height of 4rem. This creates a neat and uniform grid where each cell has equal dimensions.

Here are the CSS styles we apply to the root element of the calculator:

.calculator {
    display: grid;
    grid-template-columns: repeat(4, 4rem);
    grid-template-rows: repeat(6, 4rem);
}

Let's take a closer look at the result element in our calculator layout. This is the big box at the top that shows all the calculations. We make it take up the whole first row of the layout using a special CSS property called grid-column. Remember how we talked about grid-column-start and grid-column-end in our previous post? Well, we set grid-column to 1/5. This means the element starts at column 1 and ends at column 5, effectively covering the whole top row of the layout.

With this one simple CSS trick, the result element now dominates the top row of our calculator layout.

.calculator__result {
    grid-column: 1 / 5;
}

Next, let's talk about the special button that allows users to enter the number zero. This button takes up two cells in our grid. To make it span two columns, we use the grid-column property to position it. We add a new CSS class with the declaration grid-column: 1 / 3; to style the zero button and set its position in the grid layout.

.calculator__key--0 {
    grid-column: 1 / 3;
}

Aligning the result content

To align the result element to the right of its cell, we can use the justify-content property with a value of end. This will push the contents of our result element to the right. We can also set the align-items property to center and add some padding to the right side using the padding-right property, to make it look more visually pleasing. Depending on the font size, you may need to manually adjust the padding-right value.

.calculator__result {
    align-items: center;
    display: flex;
    justify-content: end;

    font-size: 2rem;
    padding-right: 1.25rem;
}

By using these declarations, we have aligned the result element to the right side of its cell while keeping it centered vertically.

Center content of the buttons

To make our buttons look sleek and professional, we need to center their content. Luckily, we can easily achieve this with CSS flexbox. By adding display: flex to our .calculator__key CSS class, we can turn each button into a flex container. This allows us to use align-items and justify-content properties to align the content of our buttons both horizontally and vertically.

In this case, we want to center the text inside each button. To do this, we simply add the following declaration to our .calculator__key CSS class:

.calculator__key {
    align-items: center;
    display: flex;
    justify-content: center;
}

By making these declarations, the content of all our buttons will now be centered both horizontally and vertically within their respective cells in the grid layout.

To make the calculator look like the real deal, we can change the background and text colors of the result and buttons. It's a simple fix. Here's an easy implementation using the background property to adjust the background color of these elements:

.calculator__result {
    background: #535052;
}
.calculator__key {
    background: #7C7A7B;
}
/* Operators: ÷, x, -, +, = */
.calculator__key--operator {
    background: #FD8D0E;
}
/* Special buttons: C, +/-, % */
.calculator__key--special {
    background: #676566;
}

Check out the demo below:

Conclusion

In this post, we explored how to create a macOS-style calculator layout using HTML and CSS. We learned how to use the grid-template-columns and grid-template-rows properties to define the number of columns and rows in our grid layout.

Additionally, we discovered how to use the grid-column property to adjust the placement of a grid item. By using align-items, justify-content, and display properties with flexbox, we were able to align the content of our buttons both horizontally and vertically.

As you can see, the macOS calculator layout is just one example of the many amazing things that can be achieved with CSS grid.

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub
• Website