How to get rid of unwanted space in CSS grid?

byMR

August 14, 2022

I am building a calculator with HTML, CSS, and JavaScript. I am facing difficulty building the basic design of the app.

I have no clue why the space is in there. I tried adding negative margin but that didn’t work too.

GOAL

CURRENT STATE

.container {
  height: 500px;
  width: 400px;
  background-color: #3333;
  border-radius: 10px;
}

.output {
  height: 100px;
  padding: 3rem 3rem 6rem 3rem;
  font-size: 2.5rem;
  text-align: right;
  background-color: #eee;
  border-radius: 10px;
}

.buttons {
  width: 400px;
  display: grid;
  row-gap: 1%;
  padding: 1rem;
  justify-self: center;
}

button {
  width: 80px;
  height: 40px;
  font-size: 1.2rem;
  border: none;
  border-radius: 2px;
  background-color: #70a1ff;
  color: #130f40;
  cursor: pointer;
}

.item0,
.item7,
.item10,
.item13,
.item16 {
  grid-column: 1;
}

.item1,
.item8,
.item11,
.item14,
.item17 {
  grid-column: 2;
}

.item2,
.item9,
.item12,
.item15 {
  grid-column: 3;
}

.item3,
.item4,
.item5,
.item6,
.item18 {
  grid-column: 4;
}

.item18 button {
  background-color: #eb4d4b;
  color: #fff;
}

.item5 button,
.item3 button,
.item4 button,
.item6 button {
  background-color: #4834d4;
  color: #fff;
}

<div class="container">
  <div class="output">
    <h3>69</h3>
  </div>
  <div class="buttons">
    <div class="item0">
      <button>AC</button>
    </div>

    <div class="item1">
      <button>C</button>
    </div>

    <div class="item2">
      <button>%</button>
    </div>

    <div class="item3">
      <button>÷</button>
    </div>

    <div class="item4">
      <button>×</button>
    </div>

    <div class="item5">
      <button>-</button>
    </div>

    <div class="item6">
      <button>+</button>
    </div>

    <div class="item7">
      <button>1</button>
    </div>

    <div class="item8">
      <button>2</button>
    </div>

    <div class="item9">
      <button>3</button>
    </div>

    <div class="item10">
      <button>4</button>
    </div>

    <div class="item11">
      <button>5</button>
    </div>

    <div class="item12">
      <button>6</button>
    </div>

    <div class="item13">
      <button>7</button>
    </div>

    <div class="item14">
      <button>8</button>
    </div>

    <div class="item15">
      <button>9</button>
    </div>

    <div class="item16">
      <button>0</button>
    </div>

    <div class="item17">
      <button>.</button>
    </div>

    <div class="item18">
      <button>=</button>
    </div>
  </div>
</div>
</div>

>Solution :

There is no reason to wrap every single button in a div. The whole reason to use a grid in the first place is to not hard-code everything HTML-wise but only apply the grid to the container. Simply create a 4-column grid (grid-template-columns: repeat(4, 1fr) and let the "equal" button span 2 columns:

.container {
  height: 500px;
  width: 400px;
  background-color: #3333;
  border-radius: 10px;
}

.output {
  height: 100px;
  padding: 3rem 3rem 6rem 3rem;
  font-size: 2.5rem;
  text-align: right;
  background-color: #eee;
  border-radius: 10px;
}

.buttons {
  width: 400px;
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(4, 1fr);
}

button {
  height: 40px;
  font-size: 1.2rem;
  border: none;
  border-radius: 2px;
  background-color: #70a1ff;
  color: #130f40;
  cursor: pointer;
}

.buttons button:last-child {
  grid-column: span 2;
  background-color: red;
}

<div class="container">
  <div class="output">
    <h3>69</h3>
  </div>
  <div class="buttons">
    <button>AC</button>
    <button>C</button>
    <button>%</button>
    <button>÷</button>
    <button>×</button>
    <button>-</button>
    <button>+</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>0</button>
    <button>.</button>
    <button>=</button>
  </div>
</div>