Автоматически изменять размер элементов сетки, чтобы сохранять сетку внутри родительского div. ⇐ CSS

[Anonymous]

Есть ли способ автоматически изменять размеры элементов сетки, чтобы лучше заполнить пустое пространство в родительском элементе div?
Я использовал запросы @media для доставки различных параметров сетки для данного экрана размер, что утомительно. Всякий раз, когда я использую автоподбор или автозаполнение, мне приходится указывать минимальное значение. Выбор небольшого значения может работать для небольших разрешений экрана, но выглядит глупо при большем разрешении экрана, поскольку размер изображения не увеличивается должным образом, а просто добавляется больше столбцов при маленьком размере изображения. Обратное происходит, если я использую большое минимальное значение для больших экранов, что приводит к переполнению элементов на мобильных устройствах и т. д. См. изображения для ПК и мобильных устройств.
Я хотел бы выяснить, как сделать CSS Grid динамически настраивает количество столбцов/строк, а также размер изображения/плитки, чтобы как можно лучше заполнить доступное пространство внутри родительского div без запросов @media. Я думаю, что это возможно с помощью CSS-сетки.
Не обращайте внимания на информацию CSS для моего свайпа.
HTML

Код: Выделить всё

    













0

style="background-image: url('001-000.svg');">
1

style="background-image: url('002-000.svg');">
2

style="background-image: url('003-000.svg');">
3

style="background-image: url('004-000.svg');">
4

style="background-image: url('005-000.svg');">
5

style="background-image: url('006-000.svg');">
6

style="background-image: url('007-000.svg');">
7

style="background-image: url('008-000.svg');">
8

style="background-image: url('009-000.svg');">
9

style="background-image: url('010-000.svg');">
10

style="background-image: url('011-000.svg');">
11

style="background-image: url('012-000.svg');">
12

style="background-image: url('013-000.svg');">
13

style="background-image: url('014-000.svg');">
14

style="background-image: url('015-000.svg');">
15

style="background-image: url('016-000.svg');">
16

style="background-image: url('017-000.svg');">
17

style="background-image: url('018-000.svg');">
18

style="background-image: url('019-000.svg');">
19

style="background-image: url('020-000.svg');">
20


Click any tile to view assembly steps for selected stage.

CSS

Код: Выделить всё

body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #808080;
}

.colors {
color: #c0c0c0;
color: #808080;
color: #007AFF;
color: #ff800d;
}

* {
box-sizing: border-box;
}

* img {
height: 100%;
width: 100%;
object-fit: contain;
}

.main,
.wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: calc(100vw - 4vh);
}

.main {
height: calc(100vh - 4vh);
margin: 2vh;
}

.wrapper {
height: calc(100vh - 4vh);
/* margin: 1em; */
margin-top: 2vh;
margin-left: 2vh;
border: solid .1vh black;
display: flex;
}

.main {
background: #c0c0c0;
}

.main img,
.wrapper img {
height: 100%;
overflow: hidden;
}

.rounded-edges,
img,
.main,
.wrapper,
.wrapper img,
.image,
.mySlider,
.myThumbs img {
border-radius: 1vh;
}

.shadow,
.mySlider,
img,
.wrapper {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

/* Swiper -------------------------------------------------------------------------------------- */
.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
object-fit: contain;
}

.swiper-slide img {
display: block;
/* width: auto; */
/* height: 100%; */
object-fit: contain;
}

.mySlider,
.myThumbs {
position: absolute;
}

.mySlider {
height: 85%;
width: 100%;
top: 0;
background: #c0c0c0;
}

.mySlider img {
height: 100%;
}

.myThumbs {
width: 100%;
height: 15%;
bottom: 0;
padding: 2vh;
/* padding-top: 1%; */
/* padding-bottom: 1%; */
}

/*
.swiper-slide img {
height: 100%;
width: 100%;
} */

.myThumbs img {
background: #c0c0c0;
border: solid .5vh #c0c0c0;
opacity: 0.6;
}

/*
.swiper-slide img {
==  height: 100%;
width: 100%;
} */

.myThumbs .swiper-slide-active img {
opacity: 1;
border: solid .5vh #ff800d;
/* background-color: red; */
/* object-fit: contain;  */
}

/* Navigation ---------------------------------------------------------------------------------- */
.index,
.logo {
height: 4vh;
}

.swiper-button-prev,
.swiper-button-next {
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
position: absolute;
height: 10vh;
width: auto;
}

.swiper-button-prev {
content: url('../../template/resources/Prev.svg');
-webkit-filter: drop-shadow(0vh .5vh 1vh #222);
}

.swiper-button-next {
content: url('../../template/resources/Next.svg');
-webkit-filter: drop-shadow(0vh .5vh 1vh #222);
}

.index {
content: url('../../template/resources/Index-Black.svg');
}

.index:hover {
content: url('../../template/resources/Index-Orange.svg');
}

.logo {
/* content: url('../../template/resources/blah-1.svg'); */
}

.logo:hover {
/* content: url('../../template/resources/blah-2.svg'); */
}

/* Pointer ------------------------------------------------------------------------------------- */
.image,
.index,
.logo,
.myThumbs img,
.swiper-button-prev,
.swiper-button-next {
cursor: pointer;
}

/* Justifications ------------------------------------------------------------------------------ */
.left,
.right,
.top,
.bottom,
.index,
.logo,
h1,
h2,
.swiper-button-prev {
position: absolute;
z-index: 1000;
}

.left,
.index,
.swiper-button-prev {
left: 2vh;
}

.right,
.logo,
.swiper-button-next {
right: 2vh;
}

.top,
.index,
.logo,
h1 {
top: 2vh;
}

.bottom,
h2 {
bottom: 2vh;
}

/* Swiper Pagination --------------------------------------------------------------------------- */
.swiper-pagination {
display: flex;
flex-direction: column;
margin-top: auto;
bottom: 0px;
--swiper-pagination-color: #ff800d;
--swiper-pagination-progressbar-size: 2vh;
}

/* Opacity ------------------------------------------------------------------------------------- */
.swiper-button-next,
.swiper-button-prev,
.index,
.logo,
.image {
opacity: .8;
}

/* Hover Opacity ------------------------------------------------------------------------------- */
.image:hover,
.swiper-slide img:hover {
border: solid .5vh #ff800d;
opacity: 1;
}

.swiper-slide-active {
pointer-events: none;
}

/* Grid ---------------------------------------------------------------------------------------- */
/* .justify { */
/*margin-left: 5vw;*/
/*margin-right: 5vw;*/
/* align-self: center; */
/* width: 90vw; */

.grid {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: masonry;
/* grid-template-columns: 1fr; */
gap: 1rem;
/* max-width: 100%; */
/* max-height: 100%; */
/* counter-reset: item; */
margin: auto;
width: 90%;
height: 100%;
/* padding-left: 4vh; */
/* padding-right: 4vh; */
}

.image {
background-size: cover;
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
margin: 0;
border: solid .5vh black;
}

.image:before {
content: "";
display: block;
height: 0;
width: 0;
padding-bottom: calc(9/16 * 100%);
}

/* Text ---------------------------------------------------------------------------------------- */
h1,
h2,
h3 {
text-align: center;
font-weight: bold;
}

h1 {
margin-top: 0;
font-size: 3vh;
}

h2 {
font-size: 1.5vh;
}

h3 {
font-size: 100%;
opacity: 1;
margin-top: 0;
margin-left: .5vh;
/* margin: auto; */
-webkit-text-fill-color: black;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: .01em;
text-shadow: 3px 4px 5px #fff;
}

/* Portrait ------------------------------------------------------------------------------------ */
@media (orientation: portrait) {
object {
width: 100%;
}

.grid {
/* grid-template-columns: repeat(auto-fit, minmax(11vh, 1fr));  */
}

.index,
.logo {
height: 3vh;
}

h1 {
margin-top: 4vh;
font-size: 2vh;
}

h3 {
font-size: 2vh:
}

.swiper-button-prev, .swiper-button-next {
height: 5vh;
}
}

/* Landscape ----------------------------------------------------------------------------------- */
@media (orientation: landscape) {
object {
height: 100%;
padding-bottom: 4vh;
}

.grid {
/* grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr)); */
}
}

Изменить
ПК
[img]https://i.stack.imgur .com/oq1aT.jpg[/img]

Мобильный
[img]https://i .stack.imgur.com/wcgE9.jpg[/img]

Желаемое распределение, соответствующее размеру области просмотра и соотношению сторон. Если бы это изображение было перевернуто в портретное положение, изображения уменьшились бы, а столбцы и строки были бы скорректированы, чтобы разместить и заполнить доступное пространство в родительском div без использования запросов @media. Возможно, для пейзажной или книжной ориентации потребуется один или два запроса @media, но я бы хотел сократить их количество.


[img]https://i.stack. imgur.com/yCvdk.jpg[/img]


Подробнее здесь: https://stackoverflow.com/questions/783 ... parent-div