Урок 2. CSS Grid Layout. Свойства grid-template-columns и grid-temaplate-rows


Содержание материала:

Создание дизайна с помощью CSS Gr >

  • Сайтостроение
  • Статьи
  • Верстка сайта
  • Основы CSS

Спецификация CSS Grid сложна для понимания и предлагает несколько новых и довольно сложных концепций. Данную статью следует рассматривать как обзор, а не как всесторонний анализ Grid.

Создание Grid

  1. Элемент становится блочным.
  2. Его дочерние элементы создают ячейки, которые можно упорядочить в строки и столбцы. Непосредственными дочерними элементами

Но сами по себе display :

Определение grid-макета

Вы можете использовать различные единицы измерения, проценты, значения

Мы определили grid с тремя столбцами (каждый шириной 25rem) и двумя строками высотой 10rem. Разметка, которая нам потребуется:

Наши grid-элементы организованы в столбцы и строки, как показано ниже.

Создание сетки с помощью

Давайте изменим значение

В результате второй столбец сетки стал уже, чем первый и третий.

Столбцы и строки сетки не обязательно должны быть одинаковой ширины.

Явный и неявный Grid

В предыдущем разделе мы явно задали, что Gr >явным Grid .

У контейнера есть только пять дочерних элементов. Оставшиеся позиции пусты. Что произойдет, когда мы добавим больше дочерних элементов в контейнер.

Когда количество grid-элементов превысит количество явно определенных ячеек, оставшиеся элементы cформируют неявный Grid.

Теперь у нас есть три строки. Заметьте, что высота третьей строки задается только содержимым и отступом. Она является частью сетки, поскольку данные элементы являются дочерними к gr data-simplebar>

Размер элементов неявного Gr data-simplebar>

Строки неявного Grid расширяются, чтобы заполнить доступную высоту контейнера.

Если мы добавим достаточно элементов, чтобы создать четвертую строку, высота ячеек неявного Gr >30

Высота строк неявного Grid будет равномерна.

В первоначальном примере мы определили только две строки, каждая высотой 10

Определение размера элементов неявного Grid

Можно задать высоту или ширину по умолчанию для элементов неявного Gr data-simplebar>

Теперь высота элементов третьей и последующих строк будет составлять 30

Использование grid-auto-rows для определения высоты элементов сетки

Есть один недостаток при использовании свойств

Содержимое grid-контейнера может переполнять контейнер при значении длины, выраженной в единицах измерения или процентах.

Единственный способ избежать подобного – это использовать функцию minmax (). Добавим ее в наш CSS:

Функцию minmax () позволяет нам определить минимальный и максимальный размер трека (строк и колонок).

В данном случае высота ряда будет составлять не менее 30

Функции minmax () может принимать длину в единицах измерения или процентах. А также одно из ключевых слов

Если ширина gr >70

Единственный способ избежать такой ситуации – использовать единицы гибкости.

Создание Grid с помощью flex

Единица гибкости (fr) показывают браузеру, какую долю или часть оставшегося пространства в gr data-simplebar>

CSS-свойства для gr >

В этом уроке мы изучим CSS-свойства, которые применяются к gr >

Итак, для инициализации grid-контейнера необходимо применить к необходимому HTML-элементу свойство display , указав одно из трех следующих значений:

  • grid (создает блочный grid-контейнер);
  • inline-grid (создает строчный grid-контейнер);
  • subgrid (если ваш gr >Обратите внимание: на grid-контейнер не оказывают влияния такие свойства, как float , clear , vertical-align и column .

Теперь рассмотрим специальные свойства для grid-контейнера:

Свойства grid-template-rows и grid-template-columns

Данные свойства определяют размеры строк и столбцов сетки. В значениях указываются необходимые параметры через пробел, которые означают размеры каждого grid-пути, а между ними можно указывать названия grid-линий.

  • — может быть указана в единицах измерения длины CSS, в процентах или же в виде доли свободного места в сетке (с использованием единицы fr (англ. fraction));
  • — произвольное имя на ваше усмотрение, заключенное в квадратные скобки.
Пример 1

Если вы не указываете имена grid-линий между значениями grid-путей, то grid-линиям автоматически присваиваются числовые имена (1, 2, 3 и т. д.):

Пример 2

Вы можете явно указать имена grid-линий:

Пример 3

Grid-линия может иметь несколько имен одновременно! В примере ниже третьей grid-линии будет присвоено два имени — col-three и the-end :

Пример 4

Если некоторые условия построения сетки повторяются, можно использовать функцию repeat() для компактности и удобства. Например:

Пример 5

Единица fr позволяет задать размер grid-пути в виде доли свободного пространства в grid-контейнере. Например, следующий код приведет к тому, что каждая колонка будет занимать ⅓ ширины grid-контейнера:

Пример 6

Вычисление свободного пространства происходит только после применения фиксированных значений. В примере ниже общий объем свободного пространства, доступного для значений fr , не включает в себя 70 пикселей:

Свойство grid-template-areas

Свойство grid-template-areas определяет шаблон сетки, используя имена grid-областей, которые заданы с помощью свойства grid-area (данное свойство применяется к grid-элементам и рассматривается в следующем уроке). Количество повторов имени grid-области определяет, сколько grid-ячеек образует эта область. Точка обозначает пустую grid-ячейку. Сам синтаксис являет собой визуализацию структуры сетки.

  • — имя grid-области, заданное свойством grid-area ;
  • . — точка, которая обозначает пустую grid-ячейку;
  • none — grid-области не определены.

Этот код определяет сетку с пятью столбцами и тремя строками. Ширина столбцов одинаковая — каждый занимает одну долю ( 1fr ) свободного пространства grid-контейнера. Вся верхняя строка является grid-областью с названием header и содержит пять ячеек. Средняя строка включает в себя трехъячеечную grid-область main , одну пустую ячейку и одноячеечную grid-область sidebar . Последнюю строку полностью занимает grid-область footer из пяти ячеек. Итоговая схема данной сетки выглядит так:

Важно: каждая строка в объявлении должна иметь одинаковое количество ячеек.

Для создания одной пустой grid-ячейки можно использовать любое количество точек, стоящих рядом. Иными словами, до тех пор, пока между этими точками нет пробелов, они будут представлять собой одну grid-ячейку.

Обратите внимание, что здесь вы не даете имена grid-линиям, а именуете только grid-области. При этом grid-линии на обоих концах grid-областей будут получать имена автоматически. К примеру, если grid-область называется header , то начальная горизонтальная grid-линия и начальная вертикальная grid-линия получат имя header-start , а конечная горизонтальная grid-линия и конечная вертикальная grid-линия получат имя header-end . Таким образом некоторые grid-линии могут иметь несколько имен. В нашем примере выше крайняя левая grid-линия имеет три имени: header-start , main-start и footer-start .

Свойство grid-template

Свойство grid-template — это сокращенная запись, которая позволяет одновременно задать значения для свойств grid-template-rows , grid-template-columns и grid-template-areas .

  • none — устанавливает исходные значения для всех трех свойств;
  • / — задает свойствам grid-template-columns и grid-template-rows соответствующие указанные значения, а свойству grid-template-areas присваивает значение none .

Также существует более сложный, но весьма удобный синтаксис для указания значений всех трех свойств. Примеры полной и сокращенной записи:

Поскольку свойство grid-template не сбрасывает неявные свойства сетки ( grid-auto-columns , grid-auto-rows и grid-auto-flow ), при том, что в большинстве случаев вы захотите это сделать, рекомендуем использовать свойство grid вместо grid-template .

Свойства grid-row-gap и grid-column-gap

Данные свойства определяют размеры grid-линий. Вы можете думать об этом как об установке промежутков между строками и столбцами. Значение задается в любых доступных единицах измерения CSS:

Такие промежутки создаются только между строками/колонками, но не с внешних краев.

Свойство grid-gap

Как вы догадались, свойство grid-gap представляет собой сокращенную запись свойств grid-row-gap и grid-column-gap . В значении указываются два параметра через пробел — сначала для промежутков между строками, затем для промежутков между столбцами:

Если между строками и колонками планируются одинаковые промежутки, в значении свойства grid-gap можно указать один параметр.

Свойство justify-items

Свойство justify-items выравнивает содержимое внутри grid-элемента вдоль оси строки. Значение влияет на все grid-элементы контейнера.

  • stretch (значение по умолчанию) — содержимое заполняет всю ширину grid-области;
  • start — содержимое прижимается к левому краю grid-области;
  • end — содержимое прижимается к правому краю grid-области;
  • center — содержимое выравнивается по центру grid-области.

Ниже — серия примеров с использованием разных значений свойства justify-items :

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

Свойство align-items

Свойство align-items выравнивает содержимое внутри grid-элемента вдоль оси столбца. Применяется ко всем grid-элементам контейнера.

  • stretch (значение по умолчанию) — содержимое заполняет всю высоту grid-области;
  • start — содержимое прижимается к верхнему краю grid-области;
  • end — содержимое прижимается к нижнему краю grid-области;
  • center — содержимое выравнивается по центру grid-области.

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

Свойство justify-content

Может случиться так, что общий размер сетки будет больше, чем размер grid-контейнера. Например, такое может произойти, если ширина всех grid-элементов является фиксированной (т. е. задана в таких единицах как px ). В этом случае вы можете установить выравнивание сетки в grid-контейнере с помощью свойства justify-content . Это свойство выравнивает сетку вдоль оси строки.

  • stretch — изменяет размеры grid-элементов так, чтобы сетка могла заполнить всю ширину grid-контейнера;
  • start — выравнивает сетку по левому краю grid-контейнера;
  • end — выравнивает сетку по правому краю grid-контейнера;
  • center — выравнивает сетку по центру grid-контейнера;
  • space-around — добавляет равное количество пространства между каждым grid-элементом, а по краям сетки оставляет половину этого пространства;
  • space-between — добавляет равное количество пространства между каждым grid-элементом, но по краям сетки не создает пространства;
  • space-evenly — добавляет равное количество пространства между каждым grid-элементом, включая края сетки.

Свойство align-content

Данное свойство похоже на предыдущее, с той лишь разницей, что теперь выравнивание сетки происходит по оси столбца. Свойство align-content принимает те же значения, что и justify-content (вы можете посмотреть их выше). Мы не будем их дублировать, но упомянем об отличии значений start и end : если в случае со свойством justify-content сетка выравнивается по левому (start) или правому (end) краю, то при использовании данных значений со свойством align-content сетка будет выравниваться либо по верхнему краю grid-контейнера (start), либо по нижнему (end).

Свойства grid-auto-rows и grid-auto-columns

Данные свойства определяют размеры любых grid-путей, сгенерированных автоматически (неявных grid-путей). Неявные grid-пути создаются, когда вы явно задаете позицию строк и столбцов (через свойства grid-template-rows и grid-template-columns ), которые находятся за пределами заданной сетки.

В качестве значения устанавливается размер пути в любых единицах измерения длины CSS, а также в процентах или долях свободного пространства fr .

Чтобы понять, как создаются неявные grid-пути, взгляните на демонстрацию ниже:

Этот код создаст сетку 2×2. Но теперь представьте, что вы используете свойства grid-row и grid-column для размещения ваших grid-элементов следующим образом:

Мы сказали элементу .item-b начинаться в столбце 5 и заканчиваться в столбце 6, но мы никогда не создавали столбцы 5 и 6. Именно потому, что мы ссылаемся на несуществующие столбцы, появятся неявные grid-пути с шириной 0. И мы можем использовать свойства grid-auto-rows и grid-auto-columns для определения размеров этих неявных grid-путей:

Свойство grid-auto-flow

Если у вас есть grid-элементы, которые вы не создавали явно, то сработает алгоритм автоматического размещения этих элементов. Свойство grid-auto-flow позволяет управлять тем, как работает алгоритм авторазмещения.

  • row (значение по умолчанию) — говорит алгоритму авторазмещения заполнять каждую строку сетки поочередно, добавляя новые строки по мере необходимости;
  • column — говорит алгоритму авторазмещения заполнять каждый столбец сетки поочередно, добавляя новые столбцы по мере необходимости;
  • dense — говорит алгоритму авторазмещения попытаться заполнить ранее образовавшиеся промежутки в сетке, если появятся подходящие по размеру grid-элементы. Важно: это может привести к изменению порядка вывода элементов.

Например, взгляните на этот HTML-код:

Мы определяем сетку с двумя строками и пятью столбцами и задаем свойство grid-auto-flow со значением row :

При размещении элементов в сетке укажем позиции только для двух из них:

Поскольку мы установили значение row для свойства grid-auto-flow , наша сетка будет выглядеть так. Обратите внимание, как три элемента, которые мы не размещали ( .item-b , .item-c и .item-d ), размещаются в строках самостоятельно:

И, соответственно, если мы зададим для свойства grid-auto-flow значение column , то элементы .item-b , .item-c и .item-d разместятся в столбцах:

Свойство grid

Наконец, мы дошли до последнего свойства в списке. Итак, свойство grid — это краткая запись, позволяющая в одной строке определить следующие свойства:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Также свойство grid устанавливает исходные значения для свойств grid-column-gap и grid-row-gap , даже если они не заданы явно в данном свойстве.

  • none — устанавливает значения по умолчанию для всех свойств;
  • / — устанавливает указанные значения для свойств grid-template-rows и grid-template-columns соответственно, а также задает значения по умолчанию для других свойств;
  • [ [ / ] ] — устанавливает указанные значения для свойств grid-auto-flow , grid-auto-rows и grid-auto-columns соответственно. Если значение для свойства grid-auto-columns не задано, то ему задается значение, установленное для grid-auto-rows . Если значения не заданы для обоих свойств, устанавливаются значения по умолчанию.
Пример

Следующие блоки CSS-кода идентичны по своему действию:

Следующая пара также эквивалентна:

Свойство grid также понимает более сложный, но удобный синтаксис для установки всех параметров сразу. Вы определяете свойства grid-template-areas , grid-template-rows и grid-template-columns , а для всех остальных свойств устанавливаются их значения по умолчанию. Иными словами, вы определяете имена grid-линий, размеры grid-путей и шаблон сетки. Это проще описать на примере:

CSS Grid Layout: возвращение табличной вёрстки. Часть 2

Во второй части статьи о верстке веб-страниц с помощью CSS Grid Layout уделим внимание практической стороне этой технологии. Перед прочтением ознакомьтесь с первой частью статьи.

Явное определение свойств сетки-таблицы CSS Grid

В первой части этой статьи мы знакомились с вёрстой макетов HTML-страниц с помощью CSS Grid Layout. И по ходу выяснили, что это по сути возвращение к интуитивно понятным принципам вёрстки табличками, практиковавшейся повсеместно в годы первоначального накопления контента во Всемирной Паутине.

Автоматизация — главное, чем отличается CSS Grid Layout от табличной HTML-вёрстки Общий алгоритм этой автоматизации прост. Если элемент веб-страницы имеет свойство отображения display: grid , то браузерный модуль CSS Grid автоматически нарисует на месте этого элемента сетку-табличку согласно явно или по умолчанию заданным свойствам и автоматически заполнит ячейки этой таблички дочерними элементами. Осталось только попрактиковаться с основными свойствами CSS Grid, чтобы получался нужный табличный шаблон.

По умолчанию, если все параметры сетки не заданы явным образом, модуль CSS Grid нарисует табличку в одну колонку, где для каждого элемента будет выделена ячейка в новом ряду. Ширина колонки будет занимать всё свободное место по ширине, а высота каждого ряда будет подогнана к высоте каждого элемента. Зазор между ячейками отсутствует.

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

Основные параметры любой таблицы это количество колонок и рядов, их размеры и зазор между ячейками. В CSS Grid количество и размер колонок явно задаётся CSS-свойством grid-template-columns , количество и размер рядов — свойством grid-template-rows , а свойства grid-column-gap и grid-row-gap зададут ширину вертикальных и горизонтальных дорожек между ячейками.

Для примера сверстаем с помощью CSS Grid шаблон галереи изображений. Ниже пример шаблона галереи на четыре колонки и три ряда с ячейками по 220х164 пикселя и расстоянием между ними шесть пикселей по вертикали и десять по горизонтали.

После чего забрасываем наши картинки с самым популярным контентом Веба — котиками и собачками — в этот шаблон и автоматически получаем галерею.

[Галерея с помощью CSS Grid]

Ещё больше лаконизма

Как видим, даже в самом явном виде таблица CSS Grid не теряет своей компактности, о которой с большим пафосом было написано в первой части статьи.

А можно ли сделать явное определение сетки CSS Grid ещё более коротким? — Можно. Для этого следует использовать нотацию repeat(), чтобы указанное количество раз повторить структуру трека. И галерею выше можно определить так:

В огромных сетках-таблицах с большим количеством ячеек нотация repeat() будет часто выручать.

Но и это ещё не предел компактности. Как и многие определения каскадных таблиц стилей, свойства CSS Grid имеют сокращённую форму записи. Колонки и строки можно описать одним свойством grid . Сокращённая форма для зазоров между ячейками — gap .

Пример явного определения той же галереи картинок с использованием свойств grid и gap :

Ещё больше автоматизации

Но что, если лень или не хватает пальцев на руках и ногах, чтобы посчитать количество изображений в галерее? Или же, например, в нашу галерею картинки с котиками передают через форму посетители сайта и неизвестно, сколько нужно создавать ячеек.

Если элементов в контейнере больше, чем явно задано в определении сетки, то модуль CSS Grid просто самостоятельно дорисует новые ячейки в таблице. И этой автоматизацией можно управлять посредством свойств grid-auto-rows , grid-auto-columns .

Например, для нашей галереи можно определить свойство grid-auto-rows , чтобы ряды, создаваемые автоматически, были высотой 164 пикселя. И у нас получится снова та же самая галерея.

Grid area — объединение ячеек

В HTML-таблицах было возможно объединение ячеек через атрибуты colspan и rowspan . Объединение ячеек возможно и в CSS Grid. Объединённые ячейки называются grid area.

Ряды в таблицах CSS Grid ограничены горизонтальными линями, а столбцы вертикальными. Каждая линия имеет свой номер, по которому к ней можно обращаться.

Указывая номера четырех линий, ограничивающих по горизонтали и вертикали CSS несколько ячеек в сетке, можно выделить область, в которой эти ячейки будут объединены в одну большую. Задаётся grid area, отдельным классом в правилах CSS через свойства grid-row-start , grid-column-start , grid-row-end , grid-column-end .

Например, объединим в нашей галерее первые две ячейки первого и второго ряда в одну область для большой картинки.

Существует и короткий вариант этой записи посредством свойства grid-area .

Потом присвоим этот класс нужному нам элементу, который и займёт всю эту область объединённых ячеек. А мы без особого труда получим галерею в стиле «Metro Windows»

[Объединение ячеек в CSS Grid]

Z-index

В отличие от HTML-таблиц в CSS Grid ячейки и области расположены не только в плоскости — они могут располагаться ещё и «стопочкой», как слои в «Фотошопе». Каждому слою можно задать номер через специальное свойство z-index . Чем больше номер, тем выше область или ячейка Grid Layout по сравнению с другими ячейками. Это позволяет использовать свойство z-index для эффекта наложения областей и ячеек друг на друга.

[Эффект перекрывания областей в CSS Grid]

Адаптивная вёрстка

Адаптивная вёрстка веб-страницы предполагает, что шаблон страницы будет гибко трансформироваться в зависимости от размеров и пропорций дисплея. В CSS Grid адаптивная вёрстка включается использованием ключевого слова auto-fill или auto-fit в функции repeat(), которую мы рассматривали выше. И всё.

В результате наша галерея будет автоматически подстраиваться по количеству колонок в зависимости от размеров и разрешения дисплея.

[Адаптивная вёрстка CSS Grid]

Заключение

Чем отличается auto-fill от auto-fit , а также использование новой единицы измерения «фракция», функции «резинового размера» minmax( ) , свойства порядка автоматического заполнения ячеек grid-auto-flow — всё это оставим уже в качестве домашнего задания. Потому что цель этой статьи показать практическую простоту использования CSS Grid Layout. Интуитивная понятность, лаконизм, автоматизация CSS Grid действительно упростит жизнь при создании сайтов.

Практически все современные браузеры — MS Edge, Firefox, Opera, Chrome — хвастают поддержкой CSS Grid Layout Level 1. За исключением, как можно догадаться, MS Internet Explorer. Поэтому разного рода корпоративным веб-дизайнерам, можно сказать, не повезло. Но создателям обычных частных личных сайтов CSS Grid не противопоказан. Тем более, если снова вспомнить историю, Всемирная Паутина начиналась отнюдь не с корпоративных веб-порталов.

Все про grid. Наиболее полное руководство по css grid.

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid layout, которые были рассмотрены в предыдущих уроках по верстки на grid. Система grid позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

Терминология CSS Grid

Прежде чем мы начнем разбираться со свойствами Grid layput давайте познакомимся с некоторыми терминами верстки на гридах.

Контейнер сетки

Контейнер представляет из себя родительский элемент к которому применено свойство display: grid. Например:

В примере в качестве контейнера используется div с классом container.

Элемент сетки

Каждый вложенный элемент в родительский является элементом сетки. Например:

В примере каждый div с классом item будет являться элементом сетки.

Линии сетки

Это разделительные линии которые проведены между всеми элементами в сетке. Они могут быть как горизонтальные так и вертикальные.

Трек сетки

Представляет из себя некое пространство между двумя линиями сетки.

Ячейка грида или сетки

Это пространство между двумя соседними клетками в сетке.

Область сетки.

Эта область ограниченная 4-мя линиями в сетке грид.

Итак с основными определениями грида вроде разобрались теперь перейдем непосредственно к свойствам элементов. эти свойства разделяются на свойства родительских элементов и свойства дочерних элементов. Давайте будем разбираться по порядку.

Содержание

Свойства для контейнера

Свойства для дочерних элементов

Свойства для родительского элемента сетки (контейнера).

display

Задает сетку для родительского элемента. Принимает следующие значения:

  • grid — формирует сетку как грид
  • inline-grid — делает инлайновую сетку на практике это свойство редко применяется
  • subgrid — используется в том случае если ваш элемент также является и вложенным элементом в другой сетки, то при задании этого свойства размеры будут взяты у родительского элемента а не буду определять собственный.

И особенно хочется отметить, что в гридах не будут работать свойства float, clear, vertical-align.

grid-template-columns grid-template-rows

Собственно задают строки и столбцы сетки, то есть определяют размер сетки. Можно задавать как фиксированные значения в px, % так и в относительных единицах, определяющих количество свободного пространства в сетки — fr. Также можно для удобства именовать линии сетки.

А вот пример с именованными линиями грид.

Да кстати повторяющиеся части вы всегда сможете заменить с помощью функции repeat().

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

grid-template-areas

Позволяет для вашего шаблона задать именованные области, которые описаны для дочерних элементов с помощью свойства grid-area. Значения:

  • name — имя области
  • . — точка означает что ячейка пустая
  • none — область не задана

Пример создаст сетку из 4 колонок и 3 строк. 1-я строка будет состоять из области header, во 2-й строке будут 2 ячейки main, пустая ячейка и ячейка sidebar и 3-я строка будет полностью состоять из footer.

У каждой строки должно быть одинаковое количество ячеек.

grid-template

Представляет собой сокращенное свойство от свойств grid-template-rows, grid-template-columns, grid-template-areas. Значения:

  • none — установит все 3 свойства в их начальное значение
  • subgrid — установит grid-template-rows и grid-template-columns в subgrid, а grid-template-areas в начальное значение.
  • grid-template-rows/grid-template-columns — задает значения для строк и столбцов сетки грид соответственно

grid-column-gap grid-row-gap

Задает отступы между элементами в сетке. Значения:

  • size — размер отступа для элементов.

Следует заметить, что отступы задаются только между колонками и строками, но не задаются для внешних краев элементов сетки.

grid-gap

Сокращенное свойство для grid-column-gap и grid-row-gap. Пример:

Если не задать значение для grid-row-gap, то ему присваивается такое же значение как и для grid-column-gap.

justify-items

Это свойство выравнивает содержимое вдоль оси строки то есть по горизонтали. Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

align-items

Выравнивает содержимое элементов по оси столбцов или по вертикальной оси. Значения:

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

justify-content

Выравнивает сетку вдоль оси строки в случае если размер сетки больше размера контейнера, такое может произойти при установки размеров элементам в пикселах, то есть если вы задаете фиксированные размеры для элемента. Значения:

  • start — выравнивает сетку по левой стороне контейнера
  • end — выравнивает сетку оп правой стороне контейнера
  • center — выравнивает сетку по центру контейнера
  • stretch — элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

align-content

Выравнивает сетку вдоль оси столбца в случае если размер сетки больше размера контейнера, такое может произойти при установки размеров элементам в пикселах, то есть если вы задаете фиксированные размеры для элемента. Значения:

  • start — выравнивает сетку по верхней стороне контейнера
  • end — выравнивает сетку оп нижней стороне контейнера
  • center — выравнивает сетку по центру контейнера
  • stretch — элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

grid-auto-columns grid-auto-rows

Определяет размер созданных элементов, в том случае если они создаются не явно. Значения:

  • size — размер элементов в любой доступной едеинице измерения

Чтобы понять как работают эти свойства давайте рассмотрим сетку 2х2.

А теперь представте, что мы с помощью свойств grid-column и grid-row позиционируем элементы следующим образом:

То есть мы указываем элементу .item-2 чтобы он начинался на 5 линии и заканчивался на 6. Поскольку мы ссылаемся на несуществующие линии, то создаются так называемые неявные треки, чтобы заполнить собой пространство. Вот для задания ширины этим трекам и используются свойства grid-auto-columns и grid-auto-rows.

grid-auto-flow

Когда у вас есть элементы в сетке которые вы явным образом не позиционируете явным образом в сетке. Для размещения этих элементов запускается алгоритм авторазмещения, чтобы их разместить. Значения:

  • row — строки заполняются поочередно. Новые строки добавляются при необходимости
  • column — столбцв заполняются поочередно. Новые столбцы добавляются в случае необходимости
  • dense — пустые пространства в сетке заполняются в случае появления более мелких элементов позже

Пусть есть такой HTML:

Определим для них сетку с 5 столбцами и 2 строками. Свойство grid-auto-flow установим в row.

И укажем размещения в сетке только для двух элементов.

В результате получим такую сетку

Если установить grid-auto-flow в значение column, то получим уже такую сетку.

Сокращенное свойство для всех вышеописанных свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Это свойство также задает grid-column-gap и grid-row-gap на их значения по умолчанию. Значения:

  • none — задает всем свойствам их значения по умолчанию
  • grid-template-rows / grid-template-columns — задает соотвественно значения для grid-template-rows и grid-template-columns.
  • [ [ / ] ] — задает значения для свойств grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно.

Свойства дочерних элементов

grid-column-start grid-column-end grid-row-start grid-row-end

Определяют местоаоложение элемента в сетке grid-column-start/grid-row-start это линия с которой элемент будет начинаться, а grid-column-end/grid-row-end это линия на которой элемент будет заканчиваться. Значения:

  • line — может быть любым числом, которое ссылается на прономерованную линию
  • span число — элемент, который будет распространяться на некоторое количество ячеек
  • spаn имя — элемент будет распространяться до линии с указанным именем
  • auto — задает автоматическое расположение элементов

grid-column grid-row

Сокращенное свойство для grid-column-start + grid-column-end, и grid-row-start + grid-row-end. Значения:

  • start/end — значения где начинается элемент и где он заканчивается

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

grid-area

Задает название элементу, чтобы можно было на него сослаться с помощью свойства grid-template-areas. Значения:

  • name — задает имя для элемента
  • / / / — можно задавать нумерацию и название линий

justify-self

Позволяет выравнивать содержимое элемента вдоль оси строки. Применяется непосредственно к содержимому элемента. Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

align-self

Позволяет выровнить элемент вдоль столбца. Выравнивается содержимое элемента. Значения

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

gr > Задать вопрос

Допустимо ли применять к одному блоку сразу display: grid , grid-template-columns и grid-column ?

Пример:

1 ответ 1

Да, так делать можно. Надеюсь вы понимаете, что в гриде есть грид-контейнер (grid container) и его непосредственные дочерние элементы (grid items). CSS свойства принадлежат либо к группе свойств контейнера, которые будут работать только на грид-контейнерах (элементах со свойством display: grid ), либо к свойствам дочерних элементов и будут применяться только к «деткам». Если у элемента нет свойства display: grid , то свойства контейнера будут игнорироваться, если у непосредственного родителя нет свойства display: grid , то свойства родителей будут игнорироваться.

Сами элементы грида (grid items), могут быть и вложенным грид-контейнером (grid container).
Указывая свойства display: grid мы делаем элемент грид-контейнером и его непосредственные дочерние элементы становятся элементами грида (grid items), но эти дочерние элементы также могут быть грид-контейнерами.

Свойства grid-template-columns и grid-column очень разные, поэтому их можно применять вместе. grid-template-columns можно применять только к контейнерам и говорит о том в какие колонки надо помещать «деток» и работает только для непосредственных деток. Свойство grid-column можно применять только к «деткам» и будет работать только указывая явно колонку «ребёнка» относительно родителя и/или кол-во занимаемых колонок.

Как это будет работать в данном случае?

display: grid делает и .product , и .gallery грид-контейнерами, при этом .gallery будет вложенным.

grid-template-columns задаёт наличие колонок для «деток», то есть .product будет содержать две колонки, а .gallery — четыре, но это, как ожидается, отразиться только на детках.

grid-column задаёт позицию элемента отностильно контейнера и/или, для .gallery будет рассчитываться относительно .product , для элементов img относительно .gallery . Вообще значение grid-column: span 1 , возможно, что довольно бесполезно, так как оно задаёт позицию по умолчанию, а элементы и так по умолчанию занимают одну колонку. Есть хотите обнулить любое свойство, то есть глобальное значение initial .

Знакомство с CSS Gr >

Терминология

Прежде чем мы погрузимся в концепцию CSS Grid, давайте пробежимся по основной терминологии.
Линии сетки (Grid lines). Вертикальные и горизонтальные линии, которые делят сетку и образуют столбцы и строки.

Ячейка сетки (Grid cell). Отдельный элемент сетки CSS.

Область сетки (Grid area). Цельное пространство, ограниченное четырьмя линиями сетки. Область сетки может содержать любое число ячеек.

Ряд сетки (Grid track). Пространство между двумя линиями сетки. Это пространство может быть как вертикальным, так и горизонтальным.

Строка сетки (Grid row). Горизонтальный ряд сетки.

Столбец сетки (Grid column). Вертикальный ряд сетки.

Межрядный промежуток (Gutter). Пространство между строками и столбцами в сетке.

Контейнер сетки (Grid container). Контейнер, содержащий всю CSS-сетку. Это будет элемент, имеющий свойство display: grid или display: inline-grid.

Элемент сетки (Grid item). Любой элемент, являющийся прямым потомком контейнера сетки.

Приступим к созданию нашей первой сетки с CSS Grid Layout.

Ваша первая сетка

Создайте сетку

Первое, что нужно сделать, это создать контейнер сетки. Мы можем это осуществить, объявив display: grid для элемента контейнера. В этом примере мы используем div с классом container.

Определите строки и столбцы

Есть несколько способов определения строк и столбцов. Для нашей первой сетки мы используем свойство grid-template-columns и grid-template-rows . Эти свойства позволят нам определить размер столбцов и строк нашей сетки. Для создания двух строк фиксированной высоты (150px) и трех столбцов фиксированной ширины (150px), просто напишите:

Чтобы добавить четвертый столбец шириной 70px, напишите:

…и так далее, сколько бы столбцов вы ни добавляли.

Добавьте межрядный промежуток

Добавление межрядного промежутка – удивительно простое дело с CSS Grid Layout. Всего лишь добавьте:

Эта простая строчка даст вам одинаковый межрядный промежуток между всеми строками и столбцами. Чтобы определить размер промежутка отдельно для строк и столбцов, вы можете использовать вместо этой записи свойства grid-column-gap и grid-row-gap .

Теперь давайте соберем это все вместе. Вот наш HTML:

Всего несколько строк CSS позволят нам создать простую сетку:

Просмотреть результат можно на Codepen

Впечатляет, правда? Просмотрите указанный выше пример с помощью инструментов разработчика в вашем браузере. Попробуйте изменить ширину столбцов, высоту строк. Замените свойство grid-gap на grid-column-gap и grid-row-gap поиграйте с разной шириной и высотой.

При работе с CSS Grid Layout просто необходимо иметь хороший набор инструментов разработчика. В Firefox есть фантастический функционал, специально созданный чтобы помочь вам создавать и конструировать сетки. Заинтригованы? Скачайте Firefox Developer Edition и у вас будет браузер с самыми лучшими инструментами для работы с CSS Grid Layout.

Инструменты для разработчиков в Firefox

Дизайнеры и разработчики мгновенно влюбляются в CSS Grid Layout. Именно поэтому в Mozilla славно потрудились над разработкой в Firefox панели макета с инструментами для разработчиков, дополнив CSS Grid Inspector и Box Model.

Наложение сетки CSS (CSS grid overlay)

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

Интерактивная сетка (interactive grid)

В сайдбаре есть новая интерактивная сетка очертаний. Наведите мышь на контуры чтобы подсветить части сетки на странице и показать информацию по размеру, занимаемому пространству и позиционированию.

Отображение пространства сетки (display grid area)

Настройка «Показывать пространства сетки» (“Display grid areas”) показывает связанные пространства и относящиеся к ним имена в каждой ячейке. Скоро мы рассмотрим подробнее, как задать имя пространству сетки.

Визуализируйте изменения

Grid Inspector способен визуализировать изменения, происходящие с контейнером сетки. Это позволяет вам точно видеть, где на странице находятся ряды наклоняемой, поворачиваемой или масштабируемой сетки.

Эти функции и усовершенствования в настоящее время доступны и версиях Firefox Nightly и Firefox Developer. Мы рекомендуем скачать и установить себе один из этих браузеров прежде чем продолжить. Эти функции, доступные только в Firefox, помогут вам в изучении подробностей CSS Grid Layout.

Единица FR (FR unit)

В нашей первой сетке мы создали столбцы с фиксированной шириной. Это великолепно, но не очень гибко. К счастью, CSS Grid Layout представляет новую единицу длины под названием fr (сокращение от “fraction”). Mozilla Developer Network определяет единицу fr как единицу длины, представляющую долю доступного пространства в контейнере сетки. Если мы хотим переписать нашу предыдущую сетку чтобы в ней было три равных столбца, мы должны изменить наш CSS используя единицы fr:

Указание repeat()

Возьмите на заметку: если вы поймали себя на повторении единиц длины, используйте указание repeat() . Приведите приведенный выше код к такому виду:

Просмотреть результат можно на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns контейнера сетки на следующее:

Что случилось? Как видите, вы можете не только использовать указание repeat() для части списка рядов, но также и смешивать единицы длины (в данном случае px и fr).

В следующем разделе мы узнаем больше о смешении единиц.

Смешение единиц

При указании размеров рядов вы можете использовать фиксированные размеры с такими единицами как px или em. Также вы можете использовать гибкие размеры, такие как проценты или единицы fr. Тем не менее настоящее волшебство CSS Grid Layout проявляется в возможности смешивать эти единицы. Лучше всего понять как это работает можно на примере:

Здесь мы объявили сетку с тремя столбцами. Первый столбец имеет фиксированную ширину в 100px. Второй занимает 30% доступного пространства, а третий имеет ширину в 1fr, что означает, что он занимает одну часть доступного пространства. В данном случае, он займет все упомянутое пространство.

Результат смотрите на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns на следующее:

Видите, что случилось? Вместо 3 столбцов у вас есть третий столбец в 2fr, занимающий 2/3 упомянутого пространства, и четвертый столбец, занимающий оставшуюся 1/3. Продолжайте испытывать инструменты разработчика Firefox и пробуйте различные комбинации единиц.

Когда будете готовы, переходите к следующей теме, посвященной позициям элементов в сетке.

Позиция элементов

Понимание линий сетки

Теперь, когда мы освоились с созданием сетки и определением размеров строк и столбцов, мы можем перейти к размещению элементов на этой сетке.

Есть несколько способов размещения элементов, но мы начнем с базового примера.

Рассмотрим простую сетку 3х2.

Каждый элемент внутри этой сетки будет автоматически размещен в порядке, принятом по умолчанию.

Если нам нужен больший контроль, мы можем позиционировать элементы на сетке используя номера линий.

Линии сетки пронумерованы слева направо и сверху вниз (если вы работаете на языке, где письмо идет справа налево, то линии тоже будут нумероваться справа налево). Вышеуказанный пример будет иметь такую нумерацию линий, как показана на рисунке.

Позиция элемента

Вот HTML, который мы будем использовать в этом примере:

Допустим, мы хотим разместить первый элемент сетки (имеющий класс item1) во второй строке и втором столбце. Этот элемент должен будет начинаться от второй «строчной» линии и продолжаться до третьей. Также он будет начинаться от второй «столбцовой» линии и продолжаться до третьей. Мы можем записать наш CSS таким образом:

Сокращенная запись свойств

Мы также можем записать это сокращенно:

Попробуйте изменить свойство grid-row для item1 на следующее:

Видите, что произошло? Элемент занял несколько столбцов, от линии 1 до линии 3. Он также разместился между 3 и 4 «строчными» линиями, что привело к созданию новой строки. Эта новая строка сейчас является скрытой, а ее высота установлена свойством grid-auto-rows родительской сетки. Вы можете узнать больше о правилах, применяемых по умолчанию, в MDN.

Теперь давайте применим наши знания на практике, создав простой макет.

Создание простого макета

Теперь, научившись создавать сетку и располагать на ней элементы, давайте создадим простой макет. Мы не будем представлять здесь какие-либо концепции. Мы просто воспользуемся сокращенным указанием свойств grid-row и grid-column чтобы вручную разместить такие элементы, как хедер, футер и так далее.

Вот результат на Codepen

Сейчас самое время попробовать настройку «показать номера линий» в панели Firefox CSS Grid Layout. Просмотрите таким образом приведенный выше результат и выберите панель макета. Тут вы можете активировать наложение сетки и отметить «показывать номера линий». Удобно, правда? Этот инструмент облегчает визуализацию вашей сетки при позиционировании элементов.

Области шаблона

В предыдущем примере мы узнали как создавать базовый макет путем позиционирования элементов с помощью линий сетки. Другой метод позиционирования заключается в использовании именованных областей сетки со свойствами grid-template-areas и grid-area . Лучше всего показать это на примере. Давайте восстановим сетку из нашего предыдущего примера со свойством grid-template-areas :

Здесь мы определили три столбца и четыре строки. Вместо размещения каждого элемента индивидуально, мы можем определить весь макет, используя свойство grid-template-areas . Затем мы можем привязать эти области к каждому элементу сетки при помощи свойства grid-area .

Оставшаяся часть нашего CSS:

Вы знаете, что инструменты разработчика Firefox могут показывать имена областей? Попробуйте! Просмотрите сетку из этого примера и откройте панель макета. Тут вы можете управлять функциями наложения сетки и показа названий областей.

Именованные линии

Мы уже знаем как размещать элемент на сетке применяя свойства grid-column и grid-row с указанием определенных линий сетки. Мы также можем при определении сетки дать названия всем этим линиям или некоторым из них. Это позволит нам использовать эти названия вместо номеров линий. Чтобы проименовать линию, нужно просто добавить нужное имя в квадратных скобках:

Теперь у нас есть имена линий, так что мы можем использовать их при размещении элементов. Давайте переделаем наш базовый макет, используя имена линий вместо их номеров:

Вы знаете, что используя Firefox DevTools вы можете кастомизировать цвет налагаемой сетки? Пример выше имеет белый фон, а установленный по умолчанию пурпурный – не самый лучший вариант. При выборе опции наложения сетки вы увидите круг рядом с названием сетки, который показывает цвет наложения. Кликните на него и вы сможете выбрать цвет по своему вкусу. Попробуйте какой-нибудь другой цвет, например, красный.

Узнайте больше

Надеемся, это короткое пособие дало вам достаточно сведения для начала экспериментов и построения с использованием CSS Grid Layout. Но мы только приоткрыли самые базовые функции этого мощного инструмента. Если вы готовы копнуть глубже, для вас есть тысячи отличных ресурсов.

Например, сайт и твиттер Джен Симмонс – дизайнерского представителя Mozilla. Она также является разработчиком, писательницей, спикером и членом рабочей группы CSS.

Или сайт и твиттер Рэйчел Андрю — разработчика, спикера и автора. Она также является членом рабочей группы CSS и разрабатывает обучающие ресурсы, посвященные CSS Grid Layout.

MDN – Mozilla Developer Network – имеет понятные руководства и документацию по каждому свойству CSS Grid Layout.

***
Подписывайтесь на наш канал в Telegram!

Макет «Святой Грааль» при помощи CSS Gr >Jun 5, 2020
6 minute read

Данный материал является вольным переводом статьи:
Ire Aderinokun The Holy Grail Layout with CSS Grid

Материал вычитывал: Михаил Синяков

Хотя CSS Grid Layout Module пока еще находится в статусе редакторского черновика, но завершение уже близко. Мы можем включить модуль в некоторых браузерах для тестирования и выяснить, какие ошибки реализация имеет на данный момент.

CSS Grid Layout реально сложен, даже больше, чем Flexbox. Он имеет 17 новых свойств и вводит множество новых концепций на всем пути написания CSS. В попытке понять новую спецификацию, я использовала модуль для создания макета «Святой Грааль».

Что такое макет «Святой Грааль»?

Святой Грааль это макет, который состоит из четырех разделов — header, footer, основное содержимое и две боковых колонки, по одной с каждой стороны. Макет так же придерживается следующих правил:

  • «Плавающая» ширина центральной части и фиксированная ширина сайдбаров
  • Центральная часть в разметке должна идти раньше, чем два сайдбара (но после header’а)
  • Все три колонки должны быть одинаковой высоты, вне зависимости от содержимого
  • Футер должен быть всегда прижат к низу, даже если контент не заполняет вьюпорт
  • Макет должен быть отзывчивым, все разделы должны схлопываться в один столбец на маленьких экранах

Сделать такое при помощи обычного CSS без хаков довольно сложно.

Решение с использованием CSS Grid

Вот такое решение я придумала используя CSS Grid. Во-первых, разметка:

И CSS, всего 31 строка!

Разбор

Как я уже упоминала, макет сделанный при помощи CSS Grid может быть очень сложным. Однако для создания этого макета я использовала только 4 из 17 новых свойств.

  • grid-area
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

Мое решение, по созданию макета «Святой Грааль» при помощи CSS Grid можно разбить на пять шагов.

1. Определение сетки

Первое, что мы хотим сделать, это определить области сетки, к которым мы можем обратиться через псевдоним. Делается это при помощи свойства grid-area .

Затем, используя свойство grid-template-areas мы можем расположить элементы на сетке интуитивным и визуальным способом. Свойство grid-template-areas принимает список из строк разделенных пробелами. Каждая строчка представляет собой ряд. В каждой строке, у нас есть список областей сетки разделенных пробелами. Каждая область сетки занимает один столбец. Так что, если мы хотим, чтобы область охватила два столбца мы определяем ее дважды.

В макете «Святой Грааль» у нас есть 3 столбца и 3 ряда. Header и footer занимают 3 колонки, в то время как другие области охватывают по 1 колонке каждый.

С помощью этой разметки мы получим следующий результат.

2. Определение ширины столбцов

Далее, мы хотим определить ширину столбцов. Она определяется при помощи свойства grid-template-columns . Это свойство принимает разделенный пробелами список. Поскольку у нас 3 колонки, то и ширину мы определяем 3 раза.

В макете «Святой Грааль» мы хотим видеть 2 сайдбара по 150 пикселей каждый.

Также мы хотим, чтобы средний столбец занимал оставшуюся часть пространства. Мы можем сделать это при помощи новой единицы измерения fr . Она обозначает долю свободного пространства в сетке. В нашем случае добавляется еще и ширина сайдбаров, в сумме 300px.

Сейчас наш макет выглядит следующим образом.

3. Определение высоты рядов

Теперь нам нужно определить высоту рядов. Подобно тому, как мы определяем ширину столбцов при помощи grid-template-columns , мы определяем высоту при помощи grid-template-rows . Это свойство принимает разделенный пробелами список содержащий высоту для каждого ряда в нашей сетке. Хотя мы можем записать его на одной строке, я думаю, лучше и визуально более понятно, будет написать по одному ряду в строку.

Таким образом, высота header будет равняться 100px, высота footer 30, а средний ряд (основное содержимое и две боковые панели) займет оставшуюся свободную часть.

4. Прижатый footer

В данном макете мы хотим, чтобы футер всегда находился в нижней части экрана, даже если содержимого на странице мало. Для этого установим минимальную высоту элемента .hg равной высоте вьюпорта.

Поскольку мы указали, что средний ряд должен занимать оставшуюся часть свободного пространства он растягивается и заполняет экран.

5. Делаем макет отзывчивым

И, наконец, мы хотим сделать макет отзывчивым. На небольших устройствах все элементы сетки должны отображаться в одном столбце, один за другим. Для этого нам необходимо переопределить 3 свойства, которые мы определили ранее grid-template-areas , grid-template-columns и grid-template-rows .

Во-первых, мы хотим чтобы все элементы в сетке были в одном столбце в определенном порядке.

Далее, мы хотим чтобы все элементы растянулись на всю ширину сетки.

И наконец, нам нужно сбросить высоту для каждой из строк. Все строки, кроме основного ряда, имеют определенную высоту.

Вот и все! Вы можете посмотреть демо по этой ссылке, а так же исходники.

CSS Grid Layout — лучшие практики. Часть 1

Вступление

В некотором смысле, мы все еще новички в применении CSS Grid Layout. Много люди продолжают спрашивать о лучших практиках. Рейчел Эндрю провела опрос и делится результатами, а также своими мыслями в этой статье.

Вопрос в последнее время все более набирающий популярность у людей, использующих CSS Grid Layout в своих рабочих проектах — «Каковы наилучшие практические методы?». Короткий ответ на этот вопрос заключается в пользовании макетом так, как определено в спецификации. Определенные части спецификации, которых вы решили придерживаться, и как вы объединяете CSS Grid с другими способами создания макетов (такими как Flexbox) сводится к тому, что подходит для шаблонов, которые вы пытаетесь реализовать, и к тому, как вы и ваша команда хотите работать.

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

Исследование

Чтобы помочь этой статей, я хотела узнать, как другие люди применяют CSS Grid Layout в рабочих проектах, каковы были проблемы, с которыми они столкнулись, что им в действительности понравилось? Были ли распространены общие вопросы, проблемы или методы. Чтобы узнать, я собрала краткое исследование, задав вопросы о том, как люди используют грид, и, в частности, то, что им больше всего нравится, и что они считают сложными.

Доступность

Если когда и стоит придерживаться какой-либо части спецификации Grid, то это когда вы делаете что-то, что может привести к переупорядочеванию контента:

«Разработчики должны использовать свойство order c Flex layout( у flex items) и свойства размещения CSS Grid (grid-row-start, grid-row-end, grid-column-start, grid-column-end) только для визуального, а не логического изменения порядка контента. Таблицы стилей, которые используют эти функции для логического переупорядочивания не подходят»

Хотя эта проблема актуальна не только для грида, его способность легко переупорядочивать контент в двух измерениях затрудняет выполнение этой рекомендации. Однако, если вы используете метод, который разрешает переупорядочивание контента — будь то Grid, Flexbox или даже абсолютное позиционирование — вам нужно следить, чтобы визуальное представление не теряло связь с структурой контента в документе. Скринридеры (и люди, перемещающиеся по документу с использованием только клавиатуры) будут следовать порядку элементов в структуре документа.

Места, где вам нужно быть особенно осторожными — это свойство flex-direction для изменения порядка в Flexbox; свойство order в флексбокс(Flexbox) или гриде; любое размещение элементов CSS Grid любым методом, если он изменяет логический порядок элементов в документе; и режим плотной упаковки grid-auto-flow

Дополнительные сведения об этой проблеме можно найти на следующих ресурсах:

Какие методы позиционирования CSS Grid следует применять?

«С таким большим выбором в гриде было сложно придерживаться какого-то одного метода написания (например, именовать Grid Lines или нет, grid-template-areas, fallbacks(запасной вариант), media queries(медиа-запросы)), чтобы он мог поддерживаться целой командой разработчиков»

Когда вы впервые сталкиваетесь с CSS Grid, он может потрясти вас множеством разных способов создания макета. Однако, в конечном счете, все сводится к перемещению элементов из одной строки в другую. Ваш выбор должен основываться на макете, к которому вы стремитесь, и также на том, что хорошо подойдет для вашей команды и сайта, который вы создаете.

Нет правильного или неправильного пути. Ниже я рассмотрю некоторые общие темы, с которыми возникает путаница. В предыдущей статье «Ловушки и подводные камни грида» я уже затронула многие другие потенциальные области замешательства.

Какой CSS Grid’ом мне следует пользоваться явным или неявным?

Грид, который вы определяете с помощью grid-template-columns и grid-template-rows, называется «явный»(Explicit). Он позволяет именовать строки, а также дает возможность ссылаться на последнюю строку через -1. Его следует выбирать, когда у вас есть полностью готовый макет, и вы точно знаете, где должны находиться строки вашего css grid, и размер track’ов.

Я использую «неявный»(Implicit) грид чаще всего для строчных треков (row track). Если я хочу просто определить столбцы, то после этого строки будут автоматически выровнены и будут расти, пока не охватят контент. Вы можете в какой-то мере управлять неявным гридом с помощью свойств grid-auto-columns и grid-auto-rows, однако параметров для настройки останется меньше, чем если бы все было явно указано.

Необходимо понять, знаете ли вы точное количество контента, и, следовательно, количество строк и столбцов – тогда следует остановить свой выбор на явном гриде. Если заранее не знаете количество контента, но просто хотите, чтобы строки или столбцы были созданы для хранения того, что есть, вам следует использовать неявный грид.

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

  • Трек высотой не менее 200 пикселей, но расширяющийся, чтобы сделать контент выше
  • Трек, с фиксированной высотой 400 пикселей
  • Трек высотой не менее 300 пикселей (но расширяемый)

Любое дальнейшее содержимое войдет в строку, созданную в неявном CSS Grid, и свойством grid-auto-rows я делаю эти треки высотой не менее 300 пикселей, и максимальное размер в режим авто.

Гибкий CSS Grid с гибким количеством колонок

Используя repeat() нотацию, autofill и minmax, вы можете создать шаблон с таким количеством треков, которое поместится в контейнер, тем самым в некоторой степени устраняя необходимость в медиа-запросах. Описание этой техники можно найти в этом видео-уроке, также она продемонстрирована вместе с аналогичными идеями в моей недавней статье «Применение медиа-запросов для адаптивного дизайна в 2020 году».

Выбирайте этот метод, если необходимо, чтобы контент перенесся на следующую строку при нехватке места, и нужно больше гибкости в определении размера. Вам нужно явно указать вашим столбцам отображаться с минимальным размером(minimum size) и автоматическим заполнением (auto-fill).

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

Какие единицы измерения размера трека следует использовать?

Я подробно описала изменение размера трека в моей статье «Насколько велика эта коробка? Понимание размера в макете грида», однако, я часто получаю вопросы по этой теме. В частности, меня спрашивают о разнице между размером в процентах и единицей fr.

Если вы просто указываете единицы fr как указано в спецификации, то они отличаются от процента, потому что таким образом распределяется доступное пространство. Если вы поместите более крупный элемент в трек, то до тех пор, пока fr не начнет работать, этот трек будет занимать больше места, а оставшееся будет распределено.

Чтобы заставить единицы fr распределять все пространство в контейнере сетки, вам нужно дать ему минимальный размер 0 с помощью minmax ().

Таким образом, вы можете использовать fr в любом из этих сценариев: в тех местах, где вы хотите, чтобы распределение пространства происходило автоматически (поведение по умолчанию) и тех, где вы хотите равного распределения. Я бы указывала единицы fr до тех пор, пока результат вас устраивает и после уже прибегала бы к фиксированным значениям ширины треков и зазоров между ячейками. Единственный раз, когда я пользовалась процентом это когда добавляла компоненты сетки в существующий макет, который был создан по другим принципам компоновки. Если я хочу расположить мои компоненты на основе грида на float- макете или flex- макете, размеры которого указаны в процентах , то необходимо чтобы у всех элементов был один и тот же способ указания размеров.

Инструкции » Свойства CSS Gr > 0 90

CSS Grid Layout — самая система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

Свойства для контейнера

display — определяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

grid-template-columns / grid-template-rows — определяет колонки и строки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

grid-template-areas — определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area. Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

grid-template — сокращение для grid-template-rows, grid-template-columns, и grid-template-areas.

grid-column-gap / grid-row-gap — определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами и строками.

grid-gap — сокращение для grid-row-gap и grid-column-gap.

justify-items — выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

align-items — выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

justify-content — иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

align-content — иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

grid-auto-columns / grid-auto-rows — определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows/grid-template-columns), которые находятся за пределами заданной сетки.

grid-auto-flow — если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то как алгоритм авто-размещения работает.

grid — сокращение для настройки всех следующих свойств: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Он также настраивает grid-column-gap и grid-row-gap на их начальные значения, даже если они не могут быть явно заданы этим свойством.

Свойства для элементов

grid-column-start / grid-column-end / grid-row-start / grid-row-end — определяют местоположение в сетке ссылаясь на конкретные линии. grid-column-start/grid-row-start — это линия с которой начинается элемент, а grid-column-end/grid-row-end — это линия на которой элемент заканчивается.

grid-column / grid-row — сокращение для grid-column-start + grid-column-end, и grid-row-start + grid-row-end, соответственно.

grid-area — даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через grid-template-areas свойство. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

justify-self — выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца). Это значение применяется к содержимому внутри отдельного элемента.

align-self — Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.

Верстка с помощью CSS Gr > 23 июля 2020 г. CSS, HTML, LESS, SASS

Спецификация по Grid Layout опубликована уже достаточно давно, но вебмастера всё ещё редко используются grid-вёрстку. Тут две основные причины. Первая — распространенность IE11 (по статистике около 2%), которая, к тому же поддерживает только старую версию спецификации. Вторая — реальная потребность в grid не очень высока: существующего flex хватает для 90% стоящих задач.

C другой cтороны, все современные браузеры уже полноценно поддерживают grid, поэтому можно потихонечку разбираться в его основах и решать некоторые задачи.

Grid — это не flex

Flex — тоже сетка, но с предопределенным поведением, когда ячейки всегда располагаются вдоль основной оси. Grid — более гибкий инструмент, который оперирует ячейками уже в более привычном для нас понимании — строками и столбцами.

Grid очень похож на Flex. Более того, grid позволяет оперировать новыми сущностями, которых не хватает во flex — области ячеек, линии между строками/столбцами, зазоры и т.д. Поэтому, если стоит задача сделать сложную сетку, то grid — хороший выбор.

Основы построения grid-сетки

Как и во flex, для задания grid используется только контейнер, в котором все непосредственные потомки будут являться ячейками.

В данном случае у нас сетка из 4-х ячеек. Поскольку мы ещё не задали «формат» сетки, то браузер их отобразил как обычные блоки.

Для задания «формата» сетки используются свойства контейнера grid-template-columns и grid-template-rows.

В данном примере я указал три колонки с разной шириной. Теперь добавим размеры строк.

Если бы мы делали такую сетку на flex, то пришлось указывать размеры у самих ячеек. Здесь же мы всё ещё работаем с контейнером.

Единица измерения fr

В качестве единиц измерения, можно использовать привычные пиксели или проценты, но лучше использовать «фракцию» (fraction) — долю. По поведению она похожа на flex-свойство grow («жадность»).

Расчёт примерно такой: 1fr 2fr 3fr = 6fr, следовательно 3fr = 50% всей ширины сетки, 2fr = 1/3 и 1fr = 1/6 части.

Если все колонки/строки одинаковые, то можно использовать функцию repeat(колво, размер) :

Кроме этого, часто нужно указывать размеры ячеек в каком-то диапазоне. Например колонка может быть от 100px до 200px. Для таких задач используется функция minmax(минимум, максимум) .

Зазоры между ячейками

Зазоры (gap) — это что-то вроде padding/margin, только без привязки к самим ячейкам. Свойство grid-gap задаёт зазоры между строками и столбцами.

Задание области

Ячейки можно задавать в виде «области» (area). Сделать это можно с помощью grid-template-areas и grid-area.

То есть каждая ячейка может иметь идентификатор (class, id), которому задаётся имя в пределах grid-шаблона. В grid-template-columns указываются колонки, а в grid-template-areas их имя в пределах сетки. Через grid-area мы связываем эти ячейки с областями сетки.

На базе этой схемы можно формировать произвольные области ячеек.

Следует учитывать, что области должны быть прямоугольными.

Обратите внимание на зеленые ячейки, которые не имеют идентификации в сетке. Браузер их выводит уже «обычными». То есть способ задания областей может комбинироваться с «типовым» поведением ячеек.

Индивидуальное поведение ячеек

Также можно задать индивидуальное поведение ячеек с помощью свойств

По сути это тоже самое, что и с помощью grid-template-areas, только отдельными свойствами.

Здесь нужно учитывать, что расположение ячейки указывается между грид-треками, а не между грид-линиями. Поскольку у нас 4 колонки, то треков будет 5.

Именно поэтому в ячейке A последняя секция оказалась пустой, а вторая ячейка B заняла две секции.

При таком задании положения, может возникнуть ситуация, когда ячейки окажутся в одной позиции. Для grid-сетки это нормальное поведение и чтобы определить какая ячейка должна быть сверху используется привычное z-index. Посмотрите на пример, где ячейки A и B накладываются друг на друга, но слой A поднимаем выше.

Такой приём удобно использовать, когда нужно задать поведение индивидуальной ячейки. В html-коде просто задаётся класс ячейки, а в css уже его положение. Если же нужно задать поведение всей сетки, то лучше всё-таки сделать это в контейнере с помощью grid-template-areas.

Короткие записи свойств

Разработчики CSS Grid Layout постарались на славу. Многие grid-свойства можно задать короткой записью. Я не привожу примеры, поскольку их слишком много (например свойство grid) и это пугает. Разобраться, так с ходу, довольно сложно, поэтому я думаю, что лучше запомнить азы, а дальше уже двигаться в сторону усложнений.

Применение Grid

Совершенно очевидно, что grid следует применять там, где подразумевается сложное расположение элементов/блоков. С точки зрения адаптивности, grid — не самый лучший выбор, поскольку он оперирует сразу двумя коордионатами, что делает его использование более сложным чем flex.

Второй момент — grid очень сильно завязан на верстку конкретной сетки. Это не позволяет вынести его верстку на уровень HTML в виде css-классов (atomic design).

Поэтому правило довольно простое: там где можно использовать flex, grid использовать не стоит. 🙂

Топ-пост этого месяца:  Как создаются в Angular директивы атрибутов использование методов для настройки
Добавить комментарий