html5网格始终适合一页，且网格项目数量可观

Question

我想为我的艺术品使用html5网格。该网站是一页布局。网格应根据始终适合屏幕的站点上的网格数量来确定其大小。因此，随着网格中有更多项目，这些项目将变小。下面是我现有的代码。我希望1fr可以完成这项工作。但是我想念的还有一些东西，但我很新，我想把头撞到键盘上，因为我现在想把它弄好几个小时。希望有人能帮忙。否则，我会选择4x4之类的固定网格并手动检查宽度，以使其适合全屏屏幕，只需单击一个按钮即可显示下一个4x4项目。

提前谢谢！

欢呼

.dynamic-grid{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display:grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  grid-template-columns: 25% 10% 25% 1fr;
  color: #ffffff;
  opacity: 1;
  min-height: 300px;




}

.artwork{
  position: relative;
  margin-top: 1%;
  margin-left: 1%;
  padding: 2em;
  font-size: 0.1vw;


}

.artwork > img{
  position: relative;

  max-width: 75%;
  object-fit: contain;




}

.info{
  position: relative;
  width: 100%;
  color: black;
  font-size: 1em;

}

<div id="dynamic" class="dynamic-grid">
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  
</div>

Answer 1

网格元素 fr 的尺寸不同于Flexbox中的 fr 。

在这里，考虑到元素所需的空间，它与未使用的空间有关。

您的布局解决方案可能是这样的：

html {
  height: 100%;
}

.dynamic-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(8, 12.5%);
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  grid-template-columns: 25% 10% 25% 1fr;
  color: #ffffff;
  opacity: 1;
  min-height: 300px;
  background-color: silver;
}

.artwork {
  position: relative;
  margin-top: 1%;
  margin-left: 1%;
  padding: 2em;
  font-size: 0.1vw;
  max-height: 100%;
  border: solid 1px red;
}

.artwork>img {
  position: relative;
  max-width: 100%;
  object-fit: contain;
  max-height: 100%;
}

.info {
  position: relative;
  width: 100%;
  color: black;
  font-size: 1em;
}

<div id="dynamic" class="dynamic-grid">
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>
  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

  <div class="artwork">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="display:block;
    margin-left: auto;
    margin-right: auto;">
  </div>
  <div class="info">
    <p>Info Text
    </p>
  </div>

</div>

Answer 2

我想通了，这样，随着越来越多的项目进入网格，它总是创建正确数量的单元格，并将它们的大小设置为最小20％和最大可用空间。 因此，最多5列，其余则追加到新行：

height: 100%;
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));

并且其自身的图稿图像不能大于网格项目的高度或宽度的100％：

  max-width: 100%;
  max-height: 100%;

如果我错了，请纠正我：）

.dynamic-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  color: #ffffff;
  opacity: 1;
  background-color: silver;
}

.artwork {
  background-color: deepPink;
  padding: 2%;
  color: #fff;
  border: 1px solid #fff;
  font-size: 1vh;
  text-align: center;
}

.artwork > img {
  max-width: 100%;
  max-height: 100%;
  margin: 0;

}

<html>
  <link rel="stylesheet" href="style.css">

  <div id="dynamic" class="dynamic-grid">

    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #1 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #2 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #3 unispace kittens

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #4 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #5 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #6 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #7 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #8 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #9 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #10 unispace kitten
    </div>

    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #1 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #2 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #3 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #4 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #5 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #6 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #7 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #8 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #9 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #10 unispace kitten
    </div>


    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #1 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #2 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #3 unispace kittens

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #4 unispace kittens
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #5 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #6 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #7 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #8 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #9 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #10 unispace kitten
    </div>

    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #1 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #2 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #3 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #4 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #5 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #6 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #7 unispace kitten

    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #8 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #9 unispace kitten
    </div>
    <div class="artwork">
      <img src="https://elasticbox.com/blog/wp-content/uploads/2014/08/elasticbox-rocket2.png">
      #10 unispace kitten
    </div>


</html>