Мобильная версияНе уверен, что заголовок достаточно информативен, но на данный момент у меня есть следующее:
с HTML и CSS:
.test-outer { дисплей: сетка; столбцы шаблона сетки: 1fr 1fr; зазор между столбцами: 1рем; } .test-left { цвет фона: аквамарин; радиус границы: 8 пикселей; граница: 2 пикселя, сплошная черная; выравнивание текста: по центру; высота: 6,28рем; } .test-right { дисплей: сетка; столбцы шаблона сетки: 1fr 1fr; междурядье: 1рем; зазор между столбцами: 1рем; } .test-right-item { цвет фона: #999; радиус границы: 8 пикселей; граница: 2 пикселя, сплошная черная; выравнивание текста: по центру; 0 1
2 3
4 5
6 7
8 9
10 11
12 13
14 15
16
Как видите, я зафиксировал высоту класса .test-left и хотел бы, чтобы все элементы в правом столбце, находящиеся ниже фиксированной высоты левого столбца, переполнялись в левый столбец. Высоту не обязательно фиксировать с помощью свойства height, но именно так я сейчас добился нужной высоты. В конечном итоге я хочу, чтобы это выглядело так:
К сожалению, я жестко запрограммировал кучу div, чтобы они находились именно в этих позициях, и мне хотелось бы, чтобы это делалось динамически, чтобы я мог перебирать объект данных через Jinja и размещать все code>div таким образом. Все div под верхним левым полем будут продолжать расти слева направо вниз.
Я могу представить решение, в котором я перебираю первые четыре элемента в этих данных (если четыре существуют, в противном случае сколько бы их ни было) и помещаю их справа от большого поля, а затем все элементы после первых четырех я могут зацикливаться и размещаться в другой сетке под большим прямоугольником, но, возможно, есть более чистое решение.
Меня устраивает решение, включающее немного JS.
