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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Автор: Chris Coyier

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree