Calculator Grid

As a reminder, the CSS code is what gives our code a sense of “flare”. CSS provides the color, shape, layout, font, and more.

First, let’s style the background by selecting the body element:

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #13547a, #80d0c7);
}

Then, let’s add the CSS for the calculator grid:

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

We set the display property to grid (so our calculator will be displayed in a grid). We also want our calculator to be center aligned. We’ll set the justify-content property to be “center” to center-align our grid in the horizontal direction; and we set the align-content property to “center” to center-align in the vertical direction. We also set the min-height property to “100vh” so that the initial height of the calculator grid is equal to the height of the viewport. Essentially, “100vh” means 100% of the height of your window (likewise, “80vh” = 80%).

After, we need to set the number of columns and rows in our grid. To style our columns, use the grid-template-columns property (line 6). “Repeat (4, 100px)” tells our css file to create 4 columns, each one 100 pixels wide. To style our rows, use the grid-template-rows property (line 7). Our first row contains our input/output screen, so we want it to change size to accommodate more text if necessary. Then, we can use the minmax() function to set a range on the height of the first row. 120 pixels is the minimum height. “Auto” signifies that our row can expand as large as needed to accommodate all the input/output. Then, we create four more rows, each of height 100 pixels, with the repeat function.

Calculator Buttons

Let’s handle the calculator buttons now.

We need to first select the buttons in the calculator grid:

.calculator-grid > button {}