Как реализовать адаптивный макет с использованием CSS сетки - PullRequest
Новая
       17

Как реализовать адаптивный макет с использованием CSS сетки

1 голос
/ 21 сентября 2019

Я хочу реализовать макет на рисунке 1 с использованием адаптивной сетки CSS.
Элементы A, B, C, D, E - имеют различное содержимое (содержимое пропорционально размерам блоков на рисунке ниже)

размер каждого элемента должен быть установлен в соответствии с содержимымЯ стараюсь избегать жестких @media утверждений

Я пытался определить grid-template-column с помощью repeat, auto-fill и fit-content, но я не получил желаемого результата, с которым столкнулся эта ссылка, поясняющая, что

"Автоматические повторения (автозаполнение или автоматическая подгонка) нельзя комбинировать с собственными или гибкими размерами (например, подгонка содержимого)"

Я также попытался определить столбцы сетки-шаблона с повторением, фиксированной шириной и назначить диапазон элементам: например, "grid-column: 1 / span 3;" , который также не может датьжелаемый результат.

Можно ли добиться такого макета с помощью сетки CSS?
Если нет, то как проще всего этого достичь (вложенная сетка CSS ?, комбинация flexbox и сетка CSS?)

Спасибо

figure1

1 Ответ

0 голосов
/ 24 сентября 2019

Лично я бы использовал ряд вложенных CSS-гридов и использовал бы grid-area, который поддерживает CSS-сетка.Затем используйте @media запросы для изменения макета сетки на меньших окнах просмотра.

С помощью CSS Grid вы можете указать фактические имена для областей сетки и назначить конкретные элементы определенным областям, а затем с помощью @media запроситьможно просто перемещать области и содержимое будет перемещаться автоматически при изменении размера страницы. 

.my-grid {
    display: -ms-grid;
    display: grid;
        grid-template-areas: "area1 area2" "area3 area2";
}

.my-grid-item-a1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: area1;
}

.my-grid-item-a2 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    grid-area: area2;
}

.my-grid-item-a3 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: area3;
}

Приведенный выше код будет создавать эту сетку: enter image description here

ВсеВы можете найти здесь: CSS-хитрости CSS Grid

Примечание: grid-area не поддерживается в Internet Explorer, но вы можете использовать AutoPrefixer чтобы обойти это.

...