Построение сеток CSS Grid — простые именованные области

Построение сеток CSS Grid — простые именованные области

От автора: я представляю себе именованные области в CSS Grids, как привнесение собственного синтаксиса. Это строго не необходимо (вы можете выразить размещение сетки другими способами), но это может сделать это размещение более интуитивно понятным. И, эй, если я ошибаюсь, поправьте меня в комментариях.

Возьмем за пример построение сеток CSS Grid с тремя столбцами:

Никаких строк не определено; они неявные и добавляются по мере необходимости. Мы могли бы определить их, просто не делаем этого, потому что, как и большинство в случаев в веб-дизайне, нам все равно, насколько высоки элементы: высота будет увеличиваться по мере необходимости, чтобы разместить контент.

Теперь, как мы помещаем что-то в самую верхнюю левую позицию? Мы могли бы сказать, что сетка будет размещаться так:

Это работает, хотя лучше бы .item был первым дочерним элементом .grid. В противном случае там может быть помещено что-то другое, и .item будет удаляться до следующей открытой строки. Если мы хотим быть уверенными, что он будет размещаться в верхнем левом углу, мы могли бы также создать строку:

Теперь он наверняка будет в верхнем левом углу, даже если там размещены другие элементы (они просто перекрываются). Мы можем даже сократить код с помощью свойства grid-area:

Все эти 1 и 2 могут быть достаточно интуитивными на данный момент, но числа становятся большими в более сложными сетках, включающих размещение столбцов и линий. Посмотрите этот пример. Хотя мы определяем столбцы, мы можем назвать их с помощью отдельных свойств:

Каждая группа в кавычках в grid-template-areas — это строка. Внутри располагаются имена, которые я только что составил. Это может быть, почти все, если это имеет смысл для вас. Посмотрите, как слово «pro» повторяется дважды на двух строках? Это важно, так как это говорит о том, что мы можем разместить элемент сетки там, где есть это значение «pro», и оно будет в первом из трех столбцов и будет охватывать две строки. Довольно интуитивно, да?

Мы размещаем его так:

Вот простой пример:

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: