Совет на всякий случай именуйте линии CSS Grid

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

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

Автоматическое или обозначенное расположение элементов

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

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

Какой метод позиционирования выбрать?

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

Решите вместе со своей командой, хотите ли вы именовать строки, используя Template Areas, или будете сочетать различные типы макетов. Я поняла, что мне нравится использовать для небольших компонентов Grid Template Areas. Однако нет ничего правильного или неправильного. Выясните, что лучше для вас.

CSS Grid в сочетании с другими механизмами размещения

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

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

В моей собственной работе я склонна применению Flexbox для компонентов, где я хочу, чтобы натуральный размер этих компонентов в сильной степени влиял на их расположение, опираясь на другие элементы вокруг. Я также часто использую Flexbox, потому что хочу воспользоваться выравниванием, принимая во внимание, что свойства Box Alignment (https://drafts.csswg.org/css-align/) доступны только для использования в Flexbox и CSS Grid. Также я могу применить контейнер Flex с одним дочерним элементом, только чтобы выровнять его.

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

Вложенные CSS Grid и элементы Flex

Нет абсолютно никаких проблем с созданием Grid Item(элемент сетки) как Grid Container (контейнер сетки), в результате чего одна сетка будет располагаться внутри другой. Вы можете сделать то же самое с Flexbox, создав Flex Item и Flex Container. Также можно сделать Grid Item и Flex Container или Flex Item и Grid Container — ни одна из этих задач не вызовет трудностей!

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

Вы можете располагать на одной странице несколько гридов одновременно

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

Отказы и поддержка старых веб-браузеров

«Грид, в сочетании с @supports, позволил нам лучше контролировать количество различных вариантов макета. Он также отлично поработал с нашим подходом прогрессивного улучшения, что означает, что мы можем вознаградить тех, у кого есть современные веб-браузеры, не препятствуя доступу к контенту тем, кто не использует новейшие технологии».

— Джо Ламберт, работающий на сайте rareloop.com

В опросе многие люди упоминали более старые обозреватели, однако мнения разделились поровну между теми, кто считает поддержку старых версий трудной, и те, кто считает ее легким благодаря Feature Queries, и тот факт, что грид замещает другие методы создания макетов. Я подробно написала о механизме создания этих резервных копий в статье «Использование CSS Grid: поддержка веб-браузеров без Grid».

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

Конечно, есть ситуации, когда один веб-браузер еще не поддерживает определенную спецификацию или некоторых ее частей. С CSS Grid нам очень повезло, что в веб-браузерах он был полностью реализован в течение короткого промежутка времени. Поэтому наше внимание должно быть сосредоточено на тестировании кода в браузерах с его поддержкой и без. Возможно, вы также решили использовать префиксные версии свойств -ms в IE10 и IE11, которые затем потребует тестирования в качестве третьего типа обозревателей.

Веб-браузеры, поддерживающие современный CSS Grid Layout (а не версию IE), также поддерживают Feature Queries. Это означает, что вы можете протестировать его поддержку перед использованием.

Тестирование в браузерах без поддержки грида

При использовании fallbacks (резервный вариант) для веб-браузеров без поддержки грида (или с использованием префиксных версий -ms для IE10 и 11) вы захотите проверить, как они отображают его. Для этого вам нужен способ просмотра вашего сайта в выбранном обозревателе.

Я не стала бы применять подход для проверки вашего Feature Query, путем задания некорректных значений свойствам грида. Такой способ будет работать только в том случае, если ваша таблица стилей невероятно проста, и вы помещаете абсолютно все, что связано с вашим гридом внутри Feature Query. Это очень хрупкий и трудоемкий способ работы, особенно если вы активно используете грид. Кроме того, старый программы могут не поддерживать не только CSS Grid Layout, но и другие свойства CSS.

Есть несколько простых способов наставить себя на правильный путь тестирования ваших fallbacks. Самый простой способ — если у вас достаточно быстрое подключение к Интернету и вы не платите абонентскую плату — это воспользоваться таким сервисом, как BrowserStack. Это сервис, который позволяет просматривать веб-сайты (даже те, что разрабатываются на вашем компьютере локально) на целом ряде реальных веб-браузеров. BrowserStack предлагает бесплатные учетные записи для проектов с открытым исходным кодом.

Чтобы протестировать локально, моим предложением было бы использовать виртуальную машину с установленным вами целевым обозревателями. Microsoft предлагает бесплатные загрузки виртуальной машины с версиями IE для IE8, а также Edge. Вы также можете установить на виртуальную машину более старую версию браузера без поддержки CSS Grid. Например, получив копию Firefox 51 или ниже. После установки вашего старого Firefox обязательно отключите автоматические обновления, как описано здесь, так как в противном случае он будет спокойно обновлять себя!

Затем вы можете протестировать свой сайт в IE11 и в Firefox на одной виртуальной машине (это гораздо менее хрупкое решение, чем неправильные значения свойствам). Настройка может занять около часа или около того, но после вам будет очень удобно тестировать свои fallback’и.

Отучивание от старых привычек

«Это был мой первый раз, когда я использовал грид, так что было много понятий, которые нужно изучить, и свойства чтобы понять. Я нашел наиболее трудным это отучиться от того, что делал годами, например, очистка float’ов и упаковка в контейнеры в виде div’ов.

Многие люди, ответившие на опрос, упомянули о необходимости отучения от старых привычек и о том, насколько макеты будет легче изучать людям, совершенно не знакомым с CSS. Я склонна согласиться. При обучении людей лично у начинающих мало проблем с CSS Grid, в то время как опытные разработчики стараются использовать его как одномерный макет. Я видела попытки применения в «сетчатых систем» с применением грида контейнеров, которые нужны лишь для сеток основанных на float или flex.

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

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

Заключение

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

Держите в уме возможность переупорядочивания контента. Убедитесь, что визуальное представление не теряет связь с структурой данных в документе.
Тестирование с использованием реальных целевых веб-браузеров с локальной или удаленной виртуальной машиной.
Не забывайте, что старые методы компоновки все еще актуальны и полезны. Попробуйте разные способы реализации шаблонов. Не зацикливайтесь на CSS Grid.
Знайте, что, будучи опытным разработчиком интерфейсов, у вас, вероятно, будет целый набор предубеждений о том, как должен создаваться макет. Постарайтесь смотреть на новые методы свежим взглядом, а не адаптировать их к старым приемам.
Продолжайте разбираться. Мы все еще новички в этом. Проверяйте свою работу и делитесь своими открытиями.

Основы CSS Grid — создание сетки сайта и параметры Grid на реальных примерах

Когда-то давно я писал про необычный сервис The Grid, представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. Конструкторы сайтов в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Gr > Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи, что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Gr >В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
дочерние / items (сами элементы).

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-путей и шаблон сетки. Это проще описать на примере:

Именованные grid-линии в Grid Layout

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

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

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

Так, в примере элемент с классом special-item берет свое начало от вертикальной линии col1st и простирается до вертикальной линии col2en. И одновременно он начинается от горизонтальной линии row1st, и поскольку конечная горизонтальная линия не указана, то элемент будет занимать только 1 строку.

Или вот еще один пример макета страницы:

И на закрепление материала смотрите видео о именованных линиях в сетке грид.

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

Расположение элементов по грид-линиям с помощью CSS Grid

На этой странице

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

Собственно, начать квест по гридам со знакомства с пронумерованными линиями — логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 — самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.

Базовый пример

В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.

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

Позиционирование элементов по номерам линий

Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.

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

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

Сокращения grid-column и grid-row

Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существуют сокращенные свойства shorthand. grid-column-start и grid-column-end могут быть объединены в одном grid-column , а grid-row-start и grid-row-end — в grid-row .

Расположение элемента по умолчанию

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

Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слэша и без второго значения:

Свойство grid-area

Порядок значений для grid-area может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:

block-start (начало блока)
block-end (конец блока)
inline-start (начало строки)
inline-end (конец строки)

Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) — верхняя строчная линия грид-контейнера, конец блока (block-end) — последняя строчная линия контейнера. Начало строки (inline-start) — самая левая колоночная линия, поскольку начало строки — это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) — последняя колоночная линия грида.

Когда мы задаем нашу грид-область с помощью свойства grid-area , мы сначала определяем обе начальные линии block-start и inline-start , а затем обе конечные линии block-end и inline-end . Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания вебсайты — многонаправленные структуры.

Считая с конца

Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка — самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет -1 , а линий непосредственно перед ними -2, и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (explicit grid), то есть грида, определенного с помощью grid-template-columns и grid-template-rows. Любые линии строк и колонок, добавленные неявным гридом (implicit grid) не считаются.

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

Как растянуть элемент на длину всего грида?

Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:

Зазоры (Gutters) или аллеи (Alleys)

Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств grid-column-gap и grid-row-gap . Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство column-gap в многоколоночных макетах.

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

Сокращенная запись для грид-зазоров

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

В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же — определите трек, а не зазор.

Использование ключевого слова span

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

Ключево слово span также можно использовать в качестве значения grid-row-start / grid-row-end и grid-column-start/grid-column-end . Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.

Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем span 3 . Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.

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

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

CSS свойство grid

Определение и применение

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

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

Схематичное отображение работы свойства grid отображено на следующем изображении:

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
grid	54.0*	52.0	44.0	10.3	10.0* -ms-	16.0 12.0 -ms-

Синтаксис:

CSS синтаксис:

JavaScript синтаксис:

Значения свойства

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

gr >none — ключевое слово, означающее, что явная сетка макета не создается. Любые строки будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-rows . Является значением по умолчанию.
length / percentage — задает размер строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
flex — неотрицательное значение в «гибких» единицах измерения fr (fractional unit). Каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер строк сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
Значения flex не являются значениями length , по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc() (функция выполняет математические расчеты для определения значений свойств).
max-content — ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в столбце.
min-content — ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в столбце.
minmax(min, max) — функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в «гибких» единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.
auto — размер строк определяется размером контейнера и размером содержимого элементов в строке. Как максимум, идентичен значению max-content , а как минимум, представляет самый большой минимальный размер. Автоматические размеры строк допускается растягивать с помощью свойств align-content и justify-content .
fit-content( length | percentage ) — представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content) ), за исключением того, что размер строки зажимается значением argument, если он больше, чем автоматический минимум.
repeat( [ positive-integer | auto-fill | auto-fit ] , track-list ) — представляет из себя повторяющийся фрагмент списка строк, позволяя записать в более компактной форме большое количество строк с повторяющимся шаблоном. Возможные значения:
- positive-integer — положительное целое число, которое определяет количество повторений.
- auto-fill — если контейнер сетки имеет определенный или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не вызывает переполнения сетки. Если любое количество повторений будет вызывать переполнение контейнера, то количество повторений будет равно 1. В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, число повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз. Другими словами auto-fill заполняет строку любым количеством столбцов. Таким образом, он создает неявные столбцы всякий раз, когда новый столбец может поместиться, потому что он пытается заполнить строку как можно большим количеством столбцов. Добавленные столбцы могут быть пустыми, но они все равно будут занимать определенное место в строке.
- auto-fit — ведет себя так же, как auto-fill , за исключением того, что после размещения элементов сетки пустые повторяющиеся дорожки объединяются (это может привести к тому, что все дорожки будут объеденены, если все они пусты). Другими словами auto-fit помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными строками (как при автоматическом заполнении), а затем сворачивает пустые.

gr >none — ключевое слово, означающее, что явная сетка макета не создается. Любые столбцы будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-columns . Является значением по умолчанию.

length / percentage — Задает размер столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.

flex — Неотрицательное значение в «гибких» единицах измерения fr (fractional unit). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr , столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
Значения flex не являются значениями length , по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc() (функция выполняет математические расчеты для определения значений свойств).

max-content — ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.

min-content — ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце

minmax(min, max) — функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max . Если max меньше min , то max игнорируется, а функция обрабатывается как min . Значение в «гибких» единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.

auto — размер столбцов определяется размером контейнера и размером содержимого элементов в столбце. Как максимум, идентичен значению max-content , а как минимум, представляет самый большой минимальный размер. Автоматические размеры столбцов допускается растягивать с помощью свойств align-content и justify-content .

fit-content( length | percentage ) — представляет собой формулу min(max-content, max(auto, argument)) , которая рассчитывается по аналогии с auto (то есть minmax(auto, max-content) ), за исключением того, что размер столбца зажимается значением argument, если он больше, чем автоматический минимум.

repeat( [ positive-integer | auto-fill | auto-fit ] , track-list ) — представляет из себя повторяющийся фрагмент списка строк, позволяя записать в более компактной форме большое количество строк с повторяющимся шаблоном. Возможные значения:

positive-integer — положительное целое число, которое определяет количество повторений.
auto-fill — если контейнер сетки имеет определенный или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не вызывает переполнения сетки. Если любое количество повторений будет вызывать переполнение контейнера, то количество повторений будет равно 1. В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, число повторений является наименьшим возможным положительным целым числом, удовлетворяющим этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз. Другими словами auto-fill заполняет строку любым количеством столбцов. Таким образом, он создает неявные столбцы всякий раз, когда новый столбец может поместиться, потому что он пытается заполнить строку как можно большим количеством столбцов. Добавленные столбцы могут быть пустыми, но они все равно будут занимать определенное место в строке.
auto-fit — ведет себя так же, как auto-fill , за исключением того, что после размещения элементов сетки пустые повторяющиеся дорожки объединяются (это может привести к тому, что все дорожки будут объеденены, если все они пусты). Другими словами auto-fit помещает доступные в данный момент столбцы в пространство, расширяя их так, чтобы они занимали любое доступное пространство. Браузер делает это после заполнения этого дополнительного пространства дополнительными столбцами (как при автоматическом заполнении), а затем сворачивает пустые.

gr >none — контейнер не определяет именованные области макета сетки. Значение по умолчанию.

. — точка означает пустую ячейку сетки макета.

itemnames — строка создается для каждой отдельной строки в списке, а столбец — для каждой ячейки в строке. Несколько маркеров именованных ячеек внутри строк и между строками создают одну именованную область сетки, которая охватывает соответствующие ячейки сетки. Каждая строка с областями должна быть помещена в кавычки. Если заданные ячейки не образуют прямоугольник, то объявление является недопустимым.

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns? С помощью свойства gr >none .
Кроме того, через косую черту задает значение свойства gr >auto .

Возможные значения: «grid-template-rows / auto-flow | grid-template-rows / auto-flow grid-auto-columns | grid-template-rows / auto-flow dense | grid-template-rows / auto-flow dense grid-auto-columns»

auto-flow — алгоритм автоматического размещения размещает элементы, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости .
auto-flow dense — алгоритм автоматического размещения размещает элементы, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости. Ключевое слово dense, указывает, что алгоритм автоматического размещения использует «плотный» алгоритм размещения элементов, который пытается заполнить ранее образованные пустоты в сетке, если далее в макете появятся подходящие по размеру элементы. Это может привести к появлению элементов не в порядке их указания, при этом заполняются отверстия, оставленные большими элементами.
Если это ключевое слово dense опущено, то используется «разреженный» алгоритм, который размещает элементы в сетки не отступая для заполнения пустот. Это гарантирует, что все автоматически размещенные элементы отображаются «по порядку», даже если это оставляет пустоты, которые могли бы быть заполнены более поздними элементами.

Все остальные вложенные свойства сетки макета сбрасываются до исходных значений. [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns Задает значение свойства gr >auto .
Кроме того, через косую черту с помощью свойства gr >none .

Возможные значения: «auto-flow / grid-template-columns | auto-flow grid-auto-rows / grid-template-columns | auto-flow dense / grid-template-columns | auto-flow dense grid-auto-rows / grid-template-columns»

auto-flow — алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости .
auto-flow dense — алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости. Ключевое слово dense, указывает, что алгоритм автоматического размещения использует «плотный» алгоритм размещения элементов, который пытается заполнить ранее образованные пустоты в сетке, если далее в макете появятся подходящие по размеру элементы. Это может привести к появлению элементов не в порядке их указания, при этом заполняются отверстия, оставленные большими элементами.
Если это ключевое слово dense опущено, то используется «разреженный» алгоритм, который размещает элементы в сетки не отступая для заполнения пустот. Это гарантирует, что все автоматически размещенные элементы отображаются «по порядку», даже если это оставляет пустоты, которые могли бы быть заполнены более поздними элементами.
grid-template-columns — определяет количество, наименование и размер столбцов в макете сетки. Возможные значения описаны выше.

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

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы разместили два блочных grid-контейнера, внутри которых мы разместили по восемь элементов

Для первого контейнера с помощью свойства grid мы указываем три значения, которые определяют, что мы размещаем в макете сетки три строки, используя допустимое значение длины в «гибких» единицах измерения fr (fractional unit). В этом случае каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Через косую черту мы указываем три значения, которые определяют, что мы размещаем три столбца (дорожки), используя допустимое процентное значение, которое в зависимости от размера контейнера определяет размер столбца в процентном соотношении. Кроме того, для каждого столбца и строки мы указали свое имя, которое поместили в квадратные скобки.

Для второго контейнера с помощью свойства grid мы указываем три значения, которые определяют, что мы размещаем в макете сетки три строки, используя допустимое значение в пикселях. Через косую черту мы указываем три значения в «гибких» единицах измерения fr (fractional unit). В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

Пример использования свойства grid

В следующем примере мы рассмотрим использование свойства grid в котором зададим шаблон макета сетки, ссылаясь при этом на имена областей элементов:

В этом примере мы разместили один блочный grid-контейнер, внутри которого мы разместили четыре элемента

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

В первой строке все столбцы занимает элемент с именем header. Кроме того, используя допустимое значение в пикселях мы указываем размер данной строки равный 50 пикселям.
Во второй и третьей строке элемент с именем nav занимает первый столбец, второй и третий столбец занимает элемент с именем main, четвертые столбцы мы оставили пустыми. Обратите внимание, что необходимо в этом случае вместо имени указывать точку, в результате чего получим пустой элемент, а не ошибку в верстке. Кроме того, используя допустимое значение в пикселях мы указываем размер этих строк равный 75 пикселям.
В четвертой строке все столбцы занимает элемент с именем footer, используя допустимое значение в пикселях мы указываем размер данной строки равный 50 пикселям. Через косую черту мы указываем четыре значения в «гибких» единицах измерения fr (fractional unit). В этом случае каждый столбец из четырех занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

Обратите внимание на то, что при описании шаблона с помощью свойства grid мы каждую строку с областями помещаем в кавычки.

Пример использования свойства grid (с указанием имен областей).

В следующем примере мы рассмотрим использование свойства grid в котором определим количество и ширину строк в макете сетки и настроим неявно созданные столбцы:

В этом примере мы разместили два блочных grid-контейнера, внутри которых мы разместили по восемь элементов

Для первого контейнера с помощью свойства grid мы указываем:

Два значения, которые определяют, что мы размещаем в макете сетки две строки, используя допустимое значение длины в «гибких» единицах измерения fr (fractional unit). В этом случае каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.
Через косую черту мы указываем ключевое слово auto-flow , которое означает, что мы размещаем элементы, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости (соответствует значению column свойства grid-auto-flow).

Для второго контейнера с помощью свойства grid мы указываем:

Пример использования свойства grid (настройки неявно созданных столбцов)

В следующем примере мы рассмотрим использование свойства grid в котором определим количество и ширину столбцов в макете сетки и настроим неявно созданные строки:

В этом примере мы разместили два блочных grid-контейнера, внутри которых мы разместили по восемь элементов

Для первого контейнера с помощью свойства grid мы указываем:

Ключевое слово auto-flow , которое означает, что мы размещаем элементы, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости (соответствует значению row свойства grid-auto-flow).
Через косую черту мы указываем три значения, которые соответствуют свойству grid-template-columns и определяют, что мы размещаем в макете сетки три столбца, используя допустимое значение длины в «гибких» единицах измерения fr (fractional unit). В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

Для второго контейнера с помощью свойства grid мы указываем:

Ключевые слова auto-flow dense (соответствует значению row dense свойства gr >dense опущено (как в первом примере), то используется «разреженный» алгоритм, который размещает элементы в сетки не отступая для заполнения пустот. Это гарантирует, что все автоматически размещенные элементы отображаются «по порядку», даже если это оставляет пустоты, которые могли бы быть заполнены более поздними элементами.
Кроме того, мы указали значение 20px 50px 25px, которое соответствует значению свойства grid-auto-rows, которое задает размер для неявно созданных строк в контейнере сетки макета.
Через косую черту мы указываем три значения, которые соответствуют свойству grid-template-columns и определяют, что мы размещаем в макете сетки три столбца, используя допустимое значение длины в «гибких» единицах измерения fr (fractional unit). В этом случае каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту.

Пример использования свойства grid (настройки неявно созданных строк) CSS свойства

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 532af30ef8b84e58 • Your IP : 91.105.232.77 • Performance & security by Cloudflare