Как сделать так, чтобы элементы сетки заполняли весь контейнер, не объявляя вручную их размер? Авто свойство не работает - PullRequest
0 голосов
/ 22 апреля 2020

вот код html

<body>
<div class="outlay">
    <div class="screen"></div>
    <div class="grid-outlay">
        <div class="num" id="1">1</div>
        <div class="num" id="2">2</div>
        <div class="num" id="3">3</div>
        <div class="num" id="4">4</div>
        <div class="num" id="5">5</div>
        <div class="num" id="6">6</div>
        <div class="num" id="7">7</div>
        <div class="num" id="8">8</div>
        <div class="num" id="9">9</div>
        <div class="num" id="0">0</div>
    </div>
 </div>

Это код css, который является наиболее эффективным способом, с помощью которого я могу разместить все сетки в контейнере .outlay без каких-либо пробелов

    .grid-outlay{
         display:grid;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
     }
    .num{
    background-color:orange;
    display:flex;
    justify-content: center;
    align-content:center;
     }

1 Ответ

0 голосов
/ 22 апреля 2020

Это легко в этом случае, когда эти цифры не меняются, попробуйте это.

.grid-outlay {
  display: grid;
  grid-template-rows: 33.33vh 33.33vh 33.33vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
<div class="outlay">
    <div class="screen"></div>
    <div class="grid-outlay">
        <div class="num" id="1">1</div>
        <div class="num" id="2">2</div>
        <div class="num" id="3">3</div>
        <div class="num" id="4">4</div>
        <div class="num" id="5">5</div>
        <div class="num" id="6">6</div>
        <div class="num" id="7">7</div>
        <div class="num" id="8">8</div>
        <div class="num" id="9">9</div>
        <div class="num" id="0">0</div>
    </div>
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...