Как положить по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов?
Нужна сетка с одним рядом и динамическим количеством колонок равным половине количества детей, каждая пара из которых должна располагаться в одной ячейке
Вот такой результат, но без кучи :nth-child`ов
Дополнительно:
Дичь какая-нибудь с чередованием ячеек типа min-content 16px.
Для четных (или у вас там класс) правый отступ на это 16 для визуального отступа и выравнивание justify-self: end, чтобы содержимое вывалилось налево.
Но при этом, конечно, нет никакой гарантии попадания в размер нечетных ячеек, если сразу не был задан размер. Либо определять его js.
А то, что скажу дальше вам, наверное, не понравится.
Напрашивается вывод об ошибке в структуре.
Лучше всего показать истинную задачу, а не вывод из неё, как сейчас.
Тогда, возможно, найдется более гармоничный вариант решения.
1. Если лейбл не связывается с инпутов по for, то инпут должен лежать внутри лейбла. И тогда не надо их накладывать так сложно.
2. Инпут вообще скрывают для таких дел (доступно, не через dispalay:none). Или я чего-то не поняла в вашей идее? Зачем он там видимый?
Может скринчик того, что нужно в реальности?
p.s. вы же можете представить сколько сил у меня ушло, чтобы промолчать про идею делать табы на инпутах в целом? :)))
Инпут будет визуально скрыт, но нажимаем напрямую, лежа поверх "визуальной" кнопки, как раз чтобы избавиться от атрибутов for для каждого
Может скринчик того, что нужно в реальности?
ну никакого конкретного блока я сверстать не пытаюсь, просто экспериментирую с таким механизмом
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов в CSS Grid можно использовать псевдоэлементы ::before и ::after.
Пример решения данной задачи для контейнера с классом "grid-container" и grid-элементов внутри:
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .grid-container::before, .grid-container::after { content: ''; } .grid-item { /* стили grid-элементов */ }
В данном примере используется свойство grid-template-columns для определения количества колонок в контейнере с помощью функции repeat(2, 1fr), которая создает две равные колонки.
Псевдоэлементы ::before и ::after добавляются к контейнеру, чтобы создать дополнительные "ячейки" для распределения grid-элементов.
Обратите внимание, что стили grid-item должны быть настроены в соответствии с вашим дизайном.
Таким образом, вы можете разместить по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов, используя CSS Grid и псевдоэлементы.