Как в grid сделать, чтобы не зависеть от template-columns?
Здравствуйте. Хочу добиться такого эффекта:
Не могу понять, как избавиться от ширины колонок. По разному пробую, все никак не получается.
Мой текущий код и результат:
У меня здесь ширина уходит за пределы контейнера родителя :(
Как правильно сделать, чтобы друг за другом шло все?
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; .item:nth-child(4n + 1), .item:nth-child(4n + 4) { background: red; // Первый элемент в каждой паре будет красным width: 483px; } .item:nth-child(4n + 2), .item:nth-child(4n + 3) { background: green; // Второй элемент в каждой паре будет зеленым width: 635px; } } |
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; .item:nth-child(4n + 1), .item:nth-child(4n + 4) { background: red; // Первый элемент в каждой паре будет красным width: 483px; } .item:nth-child(4n + 2), .item:nth-child(4n + 3) { background: green; // Второй элемент в каждой паре будет зеленым width: 635px; } }
Дополнительно:
с гридом без 3 колонок и со стратегическим размещением grid-row: span 2 так не сделаешь, но такое можно попробовать провернуть с флексом и flex-flow: wrap
Если динамика, то оборачивать каждые два элемента через js и вообще без гридов. А обертки уже чередовать стилями.
И grid-row: span 2 для элементов (а не ширина), которые занимают по две колонки. Через nth-child.
Ответы:
Так:
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания grid без явного указания template-columns можно воспользоваться свойством grid-auto-columns. Это позволит задать ширину столбцов автоматически, в зависимости от содержимого.
Пример использования:
.grid-container { display: grid; grid-auto-columns: 1fr; /* каждый столбец будет занимать равную часть доступного пространства */ grid-auto-flow: column; /* элементы будут добавляться по столбцам, а не по строкам */ }
В данном примере мы создаем контейнер с использованием grid, устанавливаем свойство grid-auto-columns на 1fr (равное распределение доступного пространства для каждого столбца) и grid-auto-flow на column (элементы добавляются по столбцам).
Таким образом, при добавлении элементов в контейнер они будут автоматически распределены по столбцам без явного указания ширины каждого столбца в template-columns. Это позволит создавать гибкий и адаптивный макет без необходимости жесткого фиксирования ширины столбцов.
Надеюсь, это поможет вам создать grid без зависимости от template-columns. Если у вас есть дополнительные вопросы или нужна дополнительная помощь, не стесняйтесь обращаться!