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)不是必需的。行是自动排列的。

如果容器的大小固定，请使用px而不是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>

如何使CSS网格占据其父代高度和宽度的100％？

1 个答案: