Как исправить положение кнопки?

Question

Я создаю цифровую клавиатуру на экране. Я хотел бы либо центрировать число 0, либо сделать большую кнопку, чтобы покрыть всю область div.

Вот код, который я использую:

        .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%;
        }

Класс .zero пытается дать эффект этой кнопки 0.

Вот 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>

Спасибо за ваше время и помощь!

Answer 1

Вы можете сделать так, чтобы он охватил все дно, добавив

    .zero {
      grid-column: 1/4;
    }

Вот так:

       .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>

Answer 2

Чтобы заполнить все пространство, используйте 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>

Для заполнения середины клавиатуры используйте 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 3

Вы можете установить столбец сетки так, чтобы центрировать кнопку с цифрой 0.

.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>