Questions on odd object placement within my CSS grid

Question

I have a few questions about the CSS grid styling in my CodeSandbox here because it's not behaving how I would expect: https://codesandbox.io/s/rw0j2orqmp

1. Why is the spacing between C, CE, backspace and the numbers smaller than the spacing between the numbers and +-, 0, . ?
2. Why do I need to set my padding to 0 on the textarea element? If I don't, the sides extend out to the right farther than to the left.
3. If my setting of #backspace to position: absolute; is taken away, why does the backspace shift up one pixel?
4. Why do I have to use flex box to make the clear grid area appear correctly without wrapping backspace to the bottom? This is not necessary on the bottom row.
5. Why does my method > * {} call not put the margins in for all the children? Should it not space them apart? Is there a better way to auto-space the children of method on the right side?

Below is my scss script:

.calculator {
  margin: auto;
  vertical-align: center;
  width: 215px;
  height: 330px;
  background-color: blue;
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto;
  grid-template-areas:
    "display"
    "buttons";

  #display {
    grid-area: display;
    margin: 5px;
    padding: 0;
    resize: none;
    text-align: right;
    font-size: 40px;
    width: 95%;
    height: 100px;
  }

  .buttons {
    grid-area: buttons;
    display: grid;
    margin: 0px 5px 5px 5px;
    padding: 0;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(4, auto);
    grid-template-areas:
      "clear clear clear method"
      "number number number method"
      "number number number method"
      "number number number method"
      "bottom bottom bottom method";

    .clear {
      grid-area: clear;

      #backspace {
        position: absolute;
      }
    }

    .method {
      display: flex;
      flex-direction: column;
      grid-area: method;

      .method > * {
        margin-top: 1px;
      }
    }

    .number {
      grid-area: number;
    }

    .bottom {
      grid-area: bottom;
    }
  }
}

button {
  width: 50px;
  height: 40px;
  padding: 0;
}

I think I may have a misunderstanding of how some of these pieces work, so any advice, tips, corrections, or workarounds you can provide would be greatly appreciated.

Answer 1

1. Why is the spacing between C, CE, backspace and the numbers smaller than the spacing between the numbers and +-, 0, . ?

Because the default setting on a grid container for align-content is stretch. That's expanding your rows across the height of the container.

The .numbers container (holding the keys 1-9) can't be evenly centered in the vertical space because the space available is not evenly divisible by 2. So one side will have more / less space than the other.

You can test this by applying align-self: center, start, end, etc. to the .numbers element.

Your best bet is to apply align-content: center to the entire container, which packs the lines evenly to the vertical middle.

Add this to your code:

.buttons {
    align-content: center;
}

---

2. Why do I need to set my padding to 0 on the textarea element? If I don't, the sides extend out to the right farther than to the left.

Because a <textarea> comes with default padding. It varies across browsers, but it's 2px on all sides in Chrome.

Your padding: 0 overrides the defaults.

Note that you can also add box-sizing: border-box to your code, which would factor in padding and border lengths in your width / height calculations.

Add this to your code:

#display {
   grid-area: display;
   /* padding: 0; */ /* option 1, to override defaults */
   /* OR, option 2: */
   box-sizing: border-box; /* NEW */
   justify-self: center;   /* NEW */
 }

---

3. If my setting of #backspace to position: absolute is taken away, why does the backspace shift up one pixel?

Because button elements are inline-level elements. This means that the vertical-align property comes into play.

The default value of vertical-align is baseline. That particular value aligns inline-level elements to their content, in this case text (see demo).

Because your backspace symbol is shorter than the letters in adjacent buttons, that button needs to rise a bit to achieve baseline alignment.

To test this, replace the backspace symbol with a capital letter. The button won't move (aligning uniformly with the other buttons in the row).

With position: absolute the point above is moot because the element is removed from the document flow. It's natural offset position is auto, so it stays in place (until you define an offset property – top, bottom, left or right.)

Make these adjustments to your code:

/* #backspace { position: absolute; } */

button {
  vertical-align: bottom; /* NEW */
}

---

4. Why do I have to use flex box to make the clear grid area appear correctly without wrapping backspace to the bottom? This is not necessary on the bottom row.

You don't have any flex properties on the clear grid area. It has the same layout structure as the bottom grid area.

---

5. Why does my method > * {} call not put the margins in for all the children? Should it not space them apart? Is there a better way to auto-space the children of method on the right side?

Because you have a syntax error:

...

.method {
  display: flex;
  flex-direction: column;
  grid-area: method;         <------ missing a closing bracket here

  .method > * {
    margin-top: 1px;
  }

}

If you want to space grid items, a better approach may be to use the grid-gap properties.

forked sandbox demo