Как автоматически занять все доступное пространство в сетке css - PullRequest
Новая
       5

Как автоматически занять все доступное пространство в сетке css

1 голос
/ 26 марта 2020

У меня проблемы с пониманием того, как работают CSS строки сетки. Почему столбцы расширяются слева направо, а строки - нет? 

.grid {
  position: absolute;
  height: 50vh;
  width: 30vw;
  border: 1px solid black;
  top: calc(50% - 30vh);
  left: calc(50% - 15vw);
}

.keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.keys>button {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid black;
}
<div class="grid">
  <div class="keys">
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
  </div>
</div>

Я бы хотел, чтобы эти кнопки были на go полностью, без указания их c высота и c.

Как этого легко добиться?

1 Ответ

0 голосов
/ 26 марта 2020

Ваш <div>.keys внутри вашего <div>.grid не настроен на расширение всего элемента сетки <div>.

Вам необходимо убедиться, что все элементы div внутри элемента сетки сетки установлены так, чтобы заполнить весь контейнер в Приказ для детей, чтобы сделать это.

Добавление height: 100% к контейнеру ключей исправит это.

Вам необходимо добавить следующий код 

.keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 100%;
}

В качестве альтернативы, вы можете избавиться от стиля в Сетка все вместе, и переместить все CSS внутри него к элементу keys. Таким образом, вам не нужно будет устанавливать высоту, например 

.keys {
  display: grid;
  position: absolute;
  height: 50vh;
  width: 30vw;
  border: 1px solid black;
  top: calc(50% - 30vh);
  left: calc(50% - 15vw);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

При использовании fr в качестве измерения он всегда будет заполнять часть родительского контейнера. repeat(4, 1fr) установит размеры элемента в 25% от родительского контейнера, будь то ширина или высота.

...