Как в grid позиционировать элементы один под другим вне зависимости от ширины строки?
Всех приветствую!
Есть сетка:
display: grid; overflow: hidden; margin: 0; grid-template-columns: repeat(10, 1fr); grid-template-areas: "A A A A A A B B B B" "C C C C C C D D D D" "E E E E E E F F F F"; |
display: grid; overflow: hidden; margin: 0; grid-template-columns: repeat(10, 1fr); grid-template-areas: "A A A A A A B B B B" "C C C C C C D D D D" "E E E E E E F F F F";
По итогу элементы сетки делают выравнивание к началу строки. Как сделать так, чтобы элемент начинался от края элемента предыдущей строки? Грубо строка 1 имеет элементы высотой 50 100 50, получается расстояние в 50 от элементов строки 2. А я хочу чтобы расстояния не было и они шли один под одним.
Дополнительно:
Ответы:
https://caniuse.com/mdn-css_properties_grid-templa... Если у тебя не последний сафари то с гридом никак
Подобное поведение дает columns
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы позиционировать элементы один под другим в grid вне зависимости от ширины строки, можно воспользоваться свойством grid-auto-flow со значением column. Это позволит элементам автоматически распределяться по колонкам в столбик.
Пример использования:
.container { display: grid; grid-auto-flow: column; }
В данном случае все элементы внутри контейнера с классом "container" будут располагаться друг под другом, вне зависимости от ширины строки. При этом ширина каждого элемента будет определяться его содержимым, а не размером строки.
Таким образом, используя свойство grid-auto-flow с значением column, вы сможете легко реализовать позиционирование элементов в grid один под другим, что обеспечит гибкость и адаптивность вашего дизайна.