Create a macOS calculator layout
Tags: webdev, css, tutorial, learning
Published: 2024-03-07 01:43:19

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:

{% codepen https://codepen.io/phuocng/pen/OJGyoXd %}

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

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

```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](https://phuoc.ng/collection/css-grid/position-items-in-a-grid/)? 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:

{% codepen https://codepen.io/phuocng/pen/wvZKEWZ %}

## 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](https://github.com/phuocng/css-grid) 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](https://dev.to/phuocng)
-   [GitHub](https://github.com/phuocng)
-   [Website](https://phuoc.ng)