How to get rid of unwanted space in CSS grid? [duplicate] - html

Question

This question already has an answer here:
CSS Grid vs dynamic definition list autoplacement
(1 answer)
Closed 6 months ago.
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>

Answer 1

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>