如何使 CSS 网格采用其父级高度和宽度的 100%？

Question

我有下面的代码示例。如何确保对于任何给定的行数或列数，网格将根据需要扩展项目以填充其父容器？

目的是拥有一种计算器应用程序，其中网格项目作为按钮，应占用尽可能多的空间但均匀。

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

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>

Answer 1

grid-template-rows: repeat (2, 1fr)不需要。行会自动排列。

如果您的容器具有固定大小，请使用pxsize 而不是vh。您也可以使用该calc功能。

* { box-sizing: border-box;
}
html,body {
   height: 100%;
   margin: 0;
}
.footer {
   height: 10vh;
   background-color: #eee;
   text-align: center;
}
.wrapper {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 1px;
   justify-content: center;
   height: 90vh;
}
.box {
   background-color: #444;
   color: #fff;
   padding: 10px;
   font-size: 12px;
}

    <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>
<footer class="footer">
  footer
</footer>

如果您的容器有固定尺寸，请使用px尺寸

或者使用 Flex：

* { box-sizing: border-box;
}

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:90vh;
}

.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}

    <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>
<footer class="footer">
  footer
</footer>

无页脚：

* { box-sizing: border-box;}

html,body {
  height: 100%;
  margin: 0;
}
.container {
  position: relative;
  min-height:100%;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height:100%;
  margin: 0 auto;
  max-height:100%;
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}

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

示例 4：页脚和页眉

* { box-sizing: border-box; }

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.header {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:80vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  border: 1px solid;
  background-color: #444;
}

<div class="header">header</div>

<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>
<footer class="footer">
  footer
</footer>

**示例 5：**

* { box-sizing: border-box;}
html,body {  height: 100%;  margin: 0;}

.footer {
  height: 15vh;
  background-color: #eee;
  text-align: center;
}
.header {
  height: 15vh;
  background-color: #eee;
  text-align: center;
  
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:70vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  border: 1px solid;
  background-color: #444;
}

<div class="header">header</div>
<div class="wrap">
<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>
</div>
<div class="footer">
      footer
</div>