Могу ли я заполнить изображения в одну строку и сохранить соотношение сторон просто с css сетка - PullRequest
Новая
       6

Могу ли я заполнить изображения в одну строку и сохранить соотношение сторон просто с css сетка

0 голосов
/ 01 марта 2020

enter image description here

Я хочу создать галерею изображений, подобную этой:
1.картины заполняются в контейнер указанной ширины с его оригинальным соотношением сторон
2.each Строка имеет собственную высоту, которая автоматически c соответствует как можно большему количеству изображений
3. Это должно быть текучим

Может ли это быть достигнуто только с помощью CSS макета сетки?

скелетная ручка находится здесь:
https://codepen.io/minzojian/pen/MWwopXP

<div class="grid">
<img src="https://media-public.canva.com/MADTkhFsZ-A/1/thumbnail_large-2.jpg"/>
    <img src="https://media-public.canva.com/MADGvpvY3HA/7/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADkaQ9LP_Y/1/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADR_1AI5vk/1/thumbnail_large-1.jpg"/>
    <img src="https://media-public.canva.com/MADQ5O2kfiE/1/thumbnail_large-1.jpg"/>
    <img src="https://media-public.canva.com/MADGyf4KZA8/4/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADT4-tuwa0/1/thumbnail_large-2.jpg"/>
    <img src="https://media-public.canva.com/MADSTxsB9aY/1/thumbnail_large-1.jpg"/>
</div>

.grid {
  width: 312px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid img {
  object-fit: contain;
}

1 Ответ

0 голосов
/ 01 марта 2020

вы можете установить значения grid-template-columns и grid-template-rows ... затем создать области-template-template, а затем назначить то, что вы хотите go в какой области.

grid-template-columns: ..... независимо от grid-tmeplate-row: ..... независимо от

grid-template-fields: "A", "B", "C", "D";

photo-b {grid-area: A 1; }

фото- c {область опоясывающего скота: B 1; }

et c ..

...