Мобильная версияМне нужно создать табличную структуру для некоторых данных. Половину строк необходимо разделить на столбцы (серые на рисунке), а в другой половине должен быть только один столбец, который должен охватывать всю ширину. Кроме того, после широких строк должен быть отступ, и это основная причина, по которой я не могу использовать .
В приведенном ниже фрагменте я достиг своей цели, используя сетку и grid-template-columns: повторение(3, 1fr);. Однако это работает только в том случае, если у меня есть 3 серых столбца. На самом деле я заранее не знаю, сколько столбцов будет над широким рядом. Я ищу решение, которое работает для динамического количества серых столбцов (определяется количеством div в разметке).
Я также пытался использовать автозаполнение для шаблона столбца, но он не расширяет серые столбцы, чтобы заполнить ширину строки. Столбцы ограничены заданным значением 100 пикселей.
Как сделать так, чтобы серые столбцы заполняли всю строку, не указывая количество столбцов в CSS?
.container { ширина: 100%; нижнее поле: 10 пикселей; } .ряд { дисплей: сетка; поле внизу: 5 пикселей; } .row.static-repeat { столбцы-шаблона сетки: повторение (3, 1fr); } .row.auto-fill { Grid-template-columns: повторение (автозаполнение, minmax (100 пикселей, 1fr)); } .клетка { граница: 1 пиксель, сплошная черная; цвет фона: светло-серый; } .широкий { сетка-столбец: 1/-1; цвет фона: пшеница; Три столбца со статическим повтором: Один Два Три Четыре (широкие) Один Два Три Четыре (широкие) Четыре столбца со статическим повтором (все серые столбцы должны находиться в одной строке): Один Два Три Четыре Пять (широкие) Один Два Три Четыре Пять (широкие) Три столбца с автозаполнением (должны занимать всю ширину): Один Два Три Четыре (широкие) Один Два Три Четыре (широкие) Четыре столбца с автозаполнением (должны занимать всю ширину): Один Два Три Четыре Пять (широкие) Один Два Три Четыре Пять (широкие)
