gpt4 book ai didi

css - 如何使 CSS 网格占据其父级高度和宽度的 100%?

转载 作者:行者123 更新时间:2023-11-28 19:25:50 25 4
gpt4 key购买 nike

<分区>

我有下面的代码示例。我如何确保在给定行数或列数的情况下,网格会根据需要扩展元素以填充其父容器?

目的是有一种计算器应用程序,其中的 gird 元素作为按钮,应尽可能多但均匀地占用空间。

以下是我带来的。如您所见,有滚动,而且我不确定这是正确的方法。

body {
min-height: 100%;
}

.wrapper {
display: grid;
position: relative;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1px;
justify-content: center;
height: 100%;
}

.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 12px;
}

.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
}
<section class="container">
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
</section>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com