Можно ли последовательно расположить три элемента в грид ячейке, чтобы они не перекрывали друг друга?
Нужно чтобы три элемента( в данном случае изображения по середине) расположились в ряд в одной ячейке грида. Нужно оборачивать эти три элемента в один флекс контейнер или можно по-другому справиться?
Дополнительно:
Сначала нужно узнать, зачем они должны быть в одной ячейке и почему они не могут быть каждая в своей.
Отвечая на ваш вопрос: нет, нельзя.
Можно каждое из них прибить к своему краю, но они будут накладываться, если не влезут. Либо задавать им ширину в %.
.gallery__inner { display: grid; grid-template-columns: 1fr 3fr 1fr ; grid-template-rows: auto; gap: 15px; } |
.gallery__inner { display: grid; grid-template-columns: 1fr 3fr 1fr ; grid-template-rows: auto; gap: 15px; }
Не могли бы вы подсказать как правильнее сделать разметку с относительными ед.измерения для такой вот галереи с разными ширинами высотами и разными отступами?
Альтернатива это плагины типа isotope.
Левая и правая колонка - два flexbox'a с flex-direction: column
Колонка посередине чуть сложнее, но по факту просто три grid'а
В общем могу только пожелать удачи, особенно когда (если) будете адаптировать под мобилки)) )
Надеюсь хоть немного помог мыслями))
Чтобы сохранялась высота поставьте height: 100%
Ну и чтобы картинка не мылилась, поиграйтесь с object-fit и object-position
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, можно последовательно расположить три элемента в грид ячейке таким образом, чтобы они не перекрывали друг друга. Для этого необходимо использовать правильное сочетание свойств CSS для грид контейнера и элементов.
Прежде всего, убедитесь, что ваш грид контейнер имеет достаточное количество столбцов и строк для размещения всех трех элементов без перекрытия. Затем определите ширину и высоту каждого элемента в ячейке грида, чтобы они могли быть размещены рядом друг с другом.
Ниже приведен пример использования грид контейнера с тремя элементами внутри:
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* три столбца равной ширины */ grid-template-rows: auto; /* высота автоматически подстраивается под содержимое */ gap: 10px; /* расстояние между элементами */ } .grid-item { width: 100%; /* ширина элемента */ height: 100px; /* высота элемента */ }
Используя данный код, вы сможете создать грид контейнер с тремя элементами, которые будут последовательно расположены в ячейке грида без перекрытия. Помните, что при необходимости вы можете дополнительно настраивать стили элементов для достижения нужного внешнего вида.