如何在不手动声明其大小的情况下使网格项填充整个容器？自动属性似乎不起作用

Question

here is the html code这是 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>

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这是 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;
     }

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>

如何在不手动声明其大小的情况下使网格项填充整个容器？自动属性似乎不起作用

问题描述

1 个解决方案

解决方案1
0 2020-04-22 04:55:42

如何在不手动声明其大小的情况下使网格项填充整个容器？自动属性似乎不起作用

问题描述

1 个解决方案

解决方案1 0 2020-04-22 04:55:42

解决方案1
0 2020-04-22 04:55:42