В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.
Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:
В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div
, имеющий margin
, border
и padding
. Для создания CSS grid контейнера добавим свойство display: grid
. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header
, sidebar
, footer
или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Читать полностью »