Сетка 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

Я понял, таким образом, когда в сетку попадает больше предметов, всегда создается нужное количество ячеек, размер которых составляет минимум 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>

Answer 2

элементы сетки fr Размер отличается от fr во flexbox.

Здесь он относится к неиспользуемому пространству после учета пространства, необходимого дляelements.

Решение для вашего макета может быть таким:

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>