How do I make the grid items fill the whole container without manually declaring their size?auto property doesn't seems to work

Question

here is the html code

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

This is the css code,what is the most efficient way through which I can fit all the grids in the.outlay container without any gaps

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

Answer 1

This is easy in this case when these numbers are not changing, try this.

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

How do I make the grid items fill the whole container without manually declaring their size?auto property doesn't seems to work

Question

1 answers

solution1
0 2020-04-22 04:55:42

How do I make the grid items fill the whole container without manually declaring their size?auto property doesn't seems to work

Question

1 answers

solution1 0 2020-04-22 04:55:42

solution1
0 2020-04-22 04:55:42