Create a macOS calculator layout

Written byPhuoc Nguyen

Created

22 Dec, 2023

#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.

html

<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.

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:

css

.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.

css

.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.

css

.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.

css

.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:

css

.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:

css

.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 post 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!

Remove empty cells from the calendar←

Create a Gantt chart→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn