Можно ли создать бесконечную сетку CSS для создания галереи - PullRequest
Новая
       24

Можно ли создать бесконечную сетку CSS для создания галереи

1 голос
/ 12 февраля 2020

Уважаемые коллеги-разработчики,

Я хочу создать веб-сайт портфолио с галереей, похожий на тот, который можно найти в Instagram с 3 картинками подряд. Я пытался использовать css -grid для этого. Сетка выглядит следующим образом: (Обратите внимание, что столбец / строка 225px - это белая граница, похожая на паспарту) 

grid-template-columns: 225px repeat(3, 1fr) 225px;
grid-template-rows: 225px auto;

над галереей есть два элемента заголовка: 

#header-l{grid-row: 1 / 1; grid-column: 2 / 2;}

и 

#header-r{grid-row: 1 / 1; grid-column: 3 / span 2;}

Это состояние, которое я сейчас получил. Однако для того, чтобы галерея появилась, необходимо назначить высоту grid-контейнеру. Я использовал 

min-height: 100vh;

, однако, когда я добавляю элементы в третий ряд галереи, ячейки не сохраняют свою высоту, а go вдвое меньше.

===== ===

То, чего я хочу добиться, - это система, в которой я могу добавить количество строк в трех строках без ограничений, все из которых имеют соотношение сторон 1: 1.

Полный код можно найти здесь: https://jsfiddle.net/timlwsk/xqfat628/1/

РЕДАКТИРОВАТЬ: Typo

1 Ответ

0 голосов
/ 12 февраля 2020

Ну, есть несколько способов достичь своей цели. Прежде всего, я проверил ваш код. Было бы здорово, если бы вы могли обновить изображения случайными изображениями Unspla sh, потому что вы не можете видеть локальные изображения на jsfiddle. Однако, если вы добавляете сетки 3/2/3/2, 3/3/3/3, ... даже с 4, это, кажется, прекрасно работает на скрипке. Но позвольте мне дать вам несколько альтернатив.

Решение 1: -> Создайте строки, чтобы ваша сетка могла начинаться с 1/2/1/2 каждый раз, когда вы создаете новую строку. В вашем случае ваша сетка определена в контейнере, поэтому вы захотите продублировать этот контейнер для каждой отдельной строки (средняя величина)

Решение 2: -> Вы можете создать в своей сетке div, который будет принимать измерения 2-4 и внутри этого div, вы можете создать еще один div (img-wrapper), который имеет ширину: cal c (100% / 3) и сделать его встроенным блоком (также добавьте немного полей сверху и снизу). Таким образом, вы можете создать столько объектов изображения, сколько захотите, и даже легко настроить его для мобильных устройств. Так же, как экран @media и (max-width: 500px) img-wrapper {width: 100%}. Это может быть лучшим решением для вас

Решение 3: -> Go для такой библиотеки, как bootstrap, вы можете настроить все, что захотите, в переменных. S css file

...