How to fix a button position? - css

Question

I'm creating a number pad on screen. I would like to either center the number 0 or to make a larger button to cover the whole area of the div.
Here is the code that I'm using:
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
display: block !important;
width: 100%;
}
The .zero class is the one trying to give that 0 button's effect.
Here is the HTML:
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
Thank you for your time and help!

Answer 1

To fill whole space use grid-column: 1 / span 3;
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 1 / span 3;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
To fill middle of keypad use grid-column: 2 / span 1;
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 2 / span 1;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>

Answer 2

You may set the grid column to centre the number 0 button.
.zero {
display: block !important;
grid-column: 2 / 3; /* set grid column */
width: 100%;
}
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
display: block !important;
grid-column: 2 / 3; /* set grid column */
width: 100%;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>

Answer 3

You can have it span the whole bottom by adding
.zero {
grid-column: 1/4;
}
Like this:
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 1/4;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>