Grid container что это

Обновлено: 15.05.2024

CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
Создаем файлы index.html и style.css
Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

Создаем 3 контейнера внутри body :

Шаг 1

Шаг 2

Немного стилизуем body :

Шаг 3

Стилизуем все контейнеры:

Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.

Шаг 4

Добавим небольшой отступ между контейнерами:

Колонки и строки

Чтобы получить что-то похожее на сетку, нужно добавить колонки и строки. Они создаются с помощью свойств grid-template-columns и grid-template-rows . Эти свойства определяются в спецификации как принимающие значение, называемое "track-list" (список треков).

Эти свойства позволяют задать треки сетки с помощью имён линий и функций размера, разделённых пробелами. Свойство grid-template-columns позволяет задать колоночные треки, а свойство grid-template-rows – строковые.

Вот некоторые допустимые значения списка треков:

grid-template-columns: 100px 100px 200px – создаёт трёхколоночную сетку. Первая колонка равняется 100px, вторая – 100px, третья – 200px
grid-template-columns: min-content max-content fit-content(10em) – создаёт трёхколоночную сетку. Первая колонка имеет размер min-content , вторая – max-content . третья колонка имеет ширину max-content , если содержимое не превышает 10em, если превышает – ограничивается шириной 10em.
grid-template-columns: 1fr 1fr 1fr – создаёт трёхколоночную сетку, используя единицу измерения fr . Доступное пространство grid-контейнера распределяется между тремя колонками.
grid-template-columns: repeat(2, 10em 1fr) – создаёт четырёхколоночную сетку с размерами колонок 10em 1fr 10em 1fr, так как используется оператор repeat() с двумя повторениями шаблона колонок.
grid-template-columns: repeat(auto-fill, 200px) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, оставляя в конце пробел, если осталось немного дополнительного места.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, после чего распределяет оставшееся пространство между этими созданными колонками.
grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end] – создаёт трёхколоночную сетку. Первая и третья колонки имеют ширину, равную 1 части доступного пространства, а третья – 3 частям. Линии именуются путём добавления названий линий в квадратных скобках.

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

Единицы длины

Для создания треков можно использовать любые единицы измерения длины или проценты. Если сумма ширин треков меньше доступной в grid-контейнере, по умолчанию треки выстраиваются в начале контейнера, а в конце остаётся свободное место. Это происходит из-за того, что по умолчанию свойства align-content и justify-content имеют значение start . Вы можете разметить треки сетки или переместить их в конец контейнера, используя свойства выравнивания, про которые я подробно рассказывала в статье How To Align Things In CSS.

Также можно использовать ключевые слова min-content , max-content и fit-content() .

Использование min-content даст вам трек, который будет настолько маленьким, насколько это возможно, при этом не вызывая переполнение содержимым. Следовательно, при его использовании в качестве размера колонки, содержимое будет мягко переноситься в тех местах, где это возможно. Трек обретает ширину, равную самому длинному слову в колонке или наибольшему элементу фиксированного размера.

Использование max-content приведёт к тому, что содержимое вообще не будет переноситься, что может привести к переполнению.

Ключевое слово fit-content может быть использовано только вместе с передаваемым значением. Это значение становится максимумом, до которого может растягиваться данный трек. Следовательно, трек будет вести себя как при использовании max-content , растягивая содержимое, пока ширина не достигнет максимального значения, которое мы указали. А когда это произойдёт, содержимое начнёт переноситься как обычно. Таким образом, трек может быть меньше переданного значения, но никогда не будет больше него.

Узнать больше о размерах в CSS Grid и других технологиях разметки можно в моей статье How Big Is That Box? Understanding Sizing In CSS Layout.

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

Единицы измерения «fr»

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

Это значит, что задав список треков 1fr 1fr 1fr , доступное пространство делится на 3 и распределяется поровну между тремя колонками. Если же указать список треков 2fr 1fr 1fr , доступное пространство делится на 4, из которых 2 части отходят первой колонке, и по одной части для второй и третьей колонки.

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

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

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

Еще один пример – компонент с двумя колонками, одна из которых имеет ширину fit-content(300px) , а другая 1fr . Это полезно в ситуации, когда в первой колонке может содержаться что-то меньшее 300px, и в этом случае эта колонка займёт ровно столько пространства, сколько ей потребуется, а вторая колонка с шириной, заданной в fr займёт всё оставшееся пространство. Если же добавить что-то большее (например, изображение со свойством max-width: 100% ), первая колонка увеличится до 300px, а вторая колонка займёт остальное пространство. Использование fr совместно со свойством fit-content – это способ создавать очень гибкие компоненты сайта.

Функция repeat()

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

При использовании функции repeat() , значение перед запятой задаёт количество повторений для списка треков, идущих после запятой. Этот список треков может содержать множество значений.В итоге, вы можете задавать таким образом повторение определённого набора треков.

Функцию repeat() можно использовать лишь для части треков из всего набора. Например, следующая строка задает одну колонку шириной 1fr, затем три колонки по 200px и в конце еще одну шириной 1fr.

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

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

Мы также можем использовать другую grid-функцию, чтобы сделать значение минимальным, а свободное пространство чтобы распределялось между всеми колонками. Функция minmax() принимает значения минимального и максимального размера. Если задать минимум = 200px, а максимум = 1fr, мы получим столько колонок шириной 200px, сколько поместится, а благодаря значению максимума = 1fr, если осталось дополнительное пространство, оно равномерно распределится между всеми колонками.

Я упоминала два ключевых слова: auto-fill и auto-fit . Если у вас достаточно содержимого, чтобы заполнить весь первый ряд ячеек контейнера, поведение этих ключевых слова будет одинаковым. Если содержимого не хватает – поведение будет разным.

Значение auto-fill сохраняет размер колонки, даже если в ней нет содержимого.

При использовании значения auto-fit , пустые колонки схлопываются.

С помощью Firefox Grid Inspector вы можете увидеть, что колонки всё ещё здесь, но были схлопнуты, уменьшив свою ширину до 0px. Последняя линия нашей сетки – это линия 3, поскольку мы всё ещё можем поместить дополнительные два трека.

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

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

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

Примечание: В следующей статье из этой серии я больше расскажу о позиционировании с использованием линий и о том, как их лучше именовать. А пока что можете почитать мою статью "Naming Things in CSS Grid Layout, чтобы лучше понять эту тему.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

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

К слову, если вас интересует Флекс, вот соответствующая статья.

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

родительские (свойства грид-контейнера) и
дочерние (свойства грид-элементов)

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Вложенные гриды

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

Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства grid-gap (en-US) родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

Подгрид (Subgrid)

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr) , на grid-template-columns: subgrid . Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

Grid-линии

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

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать.

Размещение элементов по линиям

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

В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств grid-column-start (en-US) , grid-column-end (en-US) , grid-row-start и grid-row-end (en-US) . Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида.

Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

Grid Tracks

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

Можно дополнить пример выше, добавив свойство grid-template-columns и задав размеры полос колонок.

В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.

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

Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

В следующем примере мы создаём грид с треком в 2fr и двумя треками по 1fr . Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся.

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

Задание треков с помощью нотации repeat()

В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или её часть. Например, такое задание грида:

можно записать вот так:

Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

Явный и неявный грид

Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства grid-template-columns , в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью grid-template-columns и grid-template-rows . Если вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств grid-auto-rows (en-US) и grid-auto-columns (en-US) .

В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

Масштабирование треков и minmax()

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

Для подобных ситуаций в Grid предусмотрено решение с помощью функции minmax() . В следующем примере minmax() используется, как значение свойства grid-auto-rows (en-US) . Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto . Использование auto означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке.

Понимание CSS Grid (1 часть): Grid-контейнер

Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.

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

В этой статье мы рассмотрим:

Создание grid-контейнера с помощью display: grid или display: inline-grid
Создание колонок и строк с помощью grid-template-columns и grid-template-rows
Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Статьи из данной серии:

Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.

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

Зазоры (Gutters)

Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US) , или с помощью сокращённого свойства grid-gap (en-US) . В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

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

Погодите-ка

Давайте разберемся с отношениями между родительским и дочерними элементами.

Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .

Погодите-ка

Давайте разберемся с отношениями между родительским и дочерними элементами.

Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .

Grid контейнер

Мы создаём grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

В этом примере есть div, содержащий класс wrapper с пятью потомками

Сделаем wrapper grid контейнером

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

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

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

родительские (свойства грид-контейнера) и
дочерние (свойства грид-элементов)

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Использование авторазмещения на сетке

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

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

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

Компьютер

Телефон

Заключение

Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.

VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Архитектура CSS Grid

К слову, если вас интересует Флекс, вот соответствующая статья.

Сокращения для свойств CSS Grid

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content

Данное свойство является сокращением для:

place-items

Данное свойство является сокращением для:

place-self

Данное свойство является сокращением для:

grid-template

Данное свойство является сокращением для:

grid-template-rows
grid-template-columns

gap/grid-gap

Данное свойство является сокращением для:

Заключение

Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.

VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Вот простой пример макета сайта, созданного с помощью Грида.

Компьютер

Телефон

Настройка проекта

Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
Создаем файлы index.html и style.css
Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

Создаем 3 контейнера внутри body :

Шаг 1

Шаг 2

Немного стилизуем body :

Шаг 3

Стилизуем все контейнеры:

Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.

Шаг 4

Добавим небольшой отступ между контейнерами:

Свойства грид-элементов

Шкала CSS Grid

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

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

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

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения fr , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

grid-columns: start/end

Данное свойство позволяет объединять колонки. Оно является сокращением для:

Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.

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

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс .box-* по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова span :

Давайте "присвоим" 8 фракций .box-1 :

Небольшая заметка

Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.

Как использовать ключевое слово span

Считается, что использование span делает код более читаемым.

В этом случае нам просто нужно добавить к box-1 8 частей:

Это даст такой же результат.

grid-row: start/end

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к box-1 9 частей:

Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со span :

grid-area

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

Определяем grid-template-areas в родительском классе:

Затем определяем grid-area в дочерних классах:

justify-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:

align-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:

Сокращения для свойств CSS Grid

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content

Данное свойство является сокращением для:

place-items

Данное свойство является сокращением для:

place-self

Данное свойство является сокращением для:

grid-template

Данное свойство является сокращением для:

grid-template-rows
grid-template-columns

gap/grid-gap

Данное свойство является сокращением для:

Свойства грид-контейнера

Начнем со свойств родительского элемента.

grid-template-columns

Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .

Добавим строку в style.css :

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

grid-template-rows

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

Изменим строку в style.css :

grid-template-areas

Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.

Это можно считать схемой макета:

Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:

grid-template-areas : родительское свойство, создающее схему
grid-area : дочернее свойство, которое использует схему

Создаем схему

Применяем схему

Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.

column-gap

Данное свойство используется для добавления отступа между колонками.

Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .

row-gap

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

Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .

justify-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:

Добавим еще один контейнер в HTML :

И немного изменим CSS :

align-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:

justify-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:

align-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:

Что такое Grid?

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

Фиксированные и гибкие размеры полос

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

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

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

Создание дополнительных полос для хранения контента

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

Управление выравниванием

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

Управление перекрывающимся контентом

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

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

Полное визуальное руководство/шпаргалка по CSS Grid

Что дальше?

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

Размещение элементов с помощью z-index

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

Элемент box2 теперь перекрывает box1 , и отображается сверху, поскольку в исходном коде находится ниже.

Управление порядком отображения

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

Grid-области

Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных.

Создание Grid-контейнера

Grid, как и Flexbox, является значением свойства display . Следовательно, чтобы сообщить браузеру, что вы хотите использовать grid-разметку, нужно использовать display: grid . Элемент, к которому применено это свойство, станет блочным, а все его дочерние элементы станут принимать участие в контексте форматирования Grid. Это значит, что они ведут себя как grid-элементы, а не как обычные блочные или строчные.

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

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

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

Два элемента <div>
Строка текста перед
Элемент тега
Строка текста после

Если вы проверите сетку в Firefox Grid Inspector, сможете увидеть пять строковых треков, созданных для каждого элемента.

Также можно создать строчную сетку, задав display: inline-grid ; в этом случае ваш grid-контейнер станет строчным блоком. Однако, его дети всё ещё будут элементами сетки и будут вести себя так же, как элементы внутри блочного grid-контейнера. Свойство display определяет лишь внешний контекст форматирования для сетки. Именно поэтому grid-контейнер в данном случае ведёт себя точно так же, как указано выше, даже если находится рядом с другими блоками страницы.

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

Примечание: В будущем мы сможем лучше описывать разметку макета, используя display: block grid , чтобы создать блочный контейнер и display: inline grid для строчного. Почитать подробнее про это изменение в спецификации свойства display можно в моей статье "Digging Into The DIsplay Property: The Two Values Of Display".

Grid-ячейки

Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

Свойства грид-элементов

Шкала CSS Grid

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения fr , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

grid-columns: start/end

Данное свойство позволяет объединять колонки. Оно является сокращением для:

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

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс .box-* по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова span :

Давайте "присвоим" 8 фракций .box-1 :

Небольшая заметка

Как использовать ключевое слово span

Считается, что использование span делает код более читаемым.

В этом случае нам просто нужно добавить к box-1 8 частей:

Это даст такой же результат.

grid-row: start/end

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к box-1 9 частей:

Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со span :

grid-area

Определяем grid-template-areas в родительском классе:

Затем определяем grid-area в дочерних классах:

justify-self

align-self

Явная и неявная сетка

При создании сетки с помощью свойств grid-template-columns и grid-template-rows задаётся так называемая явная сетка. Определённая таким образом сетка имеет размеры, равные сумме всех заданных треков.

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

Задать размер неявных строк и колонок можно с помощью свойств grid-auto-rows или grid-auto-columns . Эти свойства принимают список треков, поэтому если вы хотите, чтобы все неявные колонки были высотой не меньше 200px и увеличивались, если того требовало содержимое, можете можете сделать следующее:

Если же нужно, чтобы размер первой неявной строки определялся автоматически исходя из содержимого, а вторая имела фиксированную высоту 100px (и так далее, поочерёдно применяя эти значения ко всем последующим строкам), то свойству можно задать несколько значений.

Свойства грид-контейнера

Начнем со свойств родительского элемента.

grid-template-columns

Добавим строку в style.css :

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

grid-template-rows

Изменим строку в style.css :

grid-template-areas

Это можно считать схемой макета:

Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:

grid-template-areas : родительское свойство, создающее схему
grid-area : дочернее свойство, которое использует схему

Создаем схему

Применяем схему

Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.

column-gap

Данное свойство используется для добавления отступа между колонками.

Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .

row-gap

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

Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .

justify-items

Добавим еще один контейнер в HTML :

И немного изменим CSS :

align-items

justify-content

align-content

Читайте также: