Обзорная статья по CSS Grid
Красным показаны горизонтальные линии 1 и 2, в синим вертикальные 2 и 3:
По аналогии с прошлым примером, красным выделена горизонтальная дорожка №3, а синим вертикальная тоже №3.
Ячейка, это любая клетка ограниченная двумя линиями.
Область, это несколько ячеек образующих прямоугольник.
Управление расположением
Для создания сетки нужно условность свойство display в grid или inline-grid.
Далее нужно указать как должна формироваться структура сетки, для этого используются свойства grid-template-columns и grid-auto-rows.
Их синтаксис довольно прост, рассмотрим его на примере колонок.
Допустим, нам требуется сделать две колонки, у которых первая примерно в два раза больше второй. Тогда нужно перечислить ширину каждой ячейки по очереди:
grid-template-columns: 70% 30%;
— и все, третий элемент автоматически будет перенесен на новую строку.
Специально для сеток css grid появилась новая единица измерения fr (фракция), по своей сути она похожа на проценты, но позволяет более красиво задать отношения между шириной или высотой ячеек.
Если нам, как и в прошлом примере, требуется чтобы одна колонка была в два раза больше второй, то записывается это просто:
grid-template-columns: 2fr 1fr;
Если нам нужно, чтобы первая колонка была маленькой, второй большой и последняя средней, то можно задать такое соотношение:
grid-template-columns: 1fr 3fr 2fr;
Учитывая, что может потребоваться, например, 12 ячеек одинакового размера, то можно использовать функцию повтора. Также ее можно комбинировать с обычными единицами, скажем, если 13 колонка должна быть 50 пикселей:
grid-template-columns: repeat(12, 1fr) 50px;
Также есть функция, позволяющая задать размер ячейки в зависимости от его контента, но не меньше переданного занчения:
grid-template-columns: 1fr fit-content(400px) 1fr;
И еще, не менее удобной и полезной функцией, является minmax, она позволяет задать минимальный и максимальный размер ячейки:
grid-auto-rows: minmax(150px, auto);
Со строками все тоже самое, но стоит обратить внимание на термин «Неявная сетка«.
Проще его понять на примере, допустим у нас задана ширина для двух колонок и высота для 3 рядов:
grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr);
тогда первые 6 ячеек будут расположены как указано, но что будет с 7 и последующими?
Они пойдут новым и рядами, но их высота будет выставлена в auto (значение по умолчанию) и как раз они будут считаться как элементы неявной сетки.
Это далеко не всегда удобно, поэтому существует свойство grid-auto-rows, оно позволяет выставить значения таким элементам сетки.
Пример общего кода:
.grid < display: grid; /* grid-template-columns: 70% 30%; grid-template-columns: 2fr 1fr; */ grid-template-columns: repeat(3, 1fr) 2fr; /* Высота всех блоков: grid-auto-rows: 150px; */ grid-auto-rows: minmax(150px, auto); >
Также можно ознакомиться с несколькими примерами, например, с тем, что можно внутри одной сетки расположить другую (вложенную) сетку или с тем, как ячейки могут накладываться друг на друга.
Grid template
Шаблоны сетки позволяют «визуально описать» какие области и как буду отображены на экране.
Допустим, нам нужно сделать заготовку для стандартного шаблона:
шапка — занимающая все пространство
контент и сайд бар — две неравных колонки занимающие всю строку
подвал — как и шапка, занимает все пространство
Для этого нужно задать ячейкам имена, через свойство grid-area:
.header
а затем описать как эти области будут выведены, используя grid-template-areas:
grid-template-areas: "header header" "main side" "footer footer" ;
.header < grid-area: header; >.footer < grid-area: footer; >.side < grid-area: side; >.main < grid-area: main; >.grid
Стоит отметить, что одна область может занимать не только несколько ячеек в ряду, но и несколько ячеек в колонке:
grid-template-areas: "header side" "main side" "footer footer" ;
но изогнуть область нельзя, она всегда должна оставаться прямоугольной.
Если же требуется оставить какие-то ячейки пустыми, то можно прописать в них любое несуществующее имя, например, none
Короткой записью для grid-template-areas и grid-template-columns, является grid-template:
.grid < display: grid; grid-template: "header side" "main side" "footer footer" / 2fr 1fr; >
Размещение ячеек и областей внутри сетки
grid-area позволяет задать с какой линии по какую будет занимать область.
grid-area, это короткая запись для свойств:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
При этом стоит обратить внимание на порядок их перечисления:
grid-area: 1 / 2 / 3 / 4; grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;
Предположим, что нам нужно растянуть одну ячейку на всю ширину сетки:
Тогда мы можем явно задать с какой по какую линию колонок должна занимать область:
Другой вариант, можно задать на сколько линий нужно расшириться, для этого используется span:
Также стоит отметить, что необязательно конечная позиция должна быть больше начальной, пример вполне валидной записи:
Также есть еще одна отличная возможность — задавать имена определенным линиям:
.grid < display: grid; grid-template-columns: [col_start] 1fr 1fr 1fr [col_middle] 1fr 1fr 1fr [col_end]; grid-template-rows: [row_start] 1fr 1fr [row__middle] 1fr 1fr [row_end]; grid-gap: 1em; >.c0 < grid-column: col_start / col_end; >
Несколько примеров для наглядности.
Выравнивание и позиционирование
Ориентация сетки:
Свойство grid-auto-flow позволит указать как стоить таблицу (по аналогии со свойством flex-direction для flexbox).
- row — значение по умолчанию, новые ячейки заполняют каждую строку поочередно, добавляя новые строки по мере необходимости.
- column — соответственно, сначала заполняются строки.
- dense — алгоритм пытается распределить ячейки так, что бы они занимали минимальное место.
Выравнивание строк / столбцов:
justify-items — горизонтальное выравнивание столбцов сетки.
align-items — вертикальное выравнивание рядов сетки.
Также есть можно использовать place-items, для краткой записи:
place-items: "align-items justify-items";
Выравнивание отдельной ячейки:
justify-self — горизонтальное положение ячейки внутри сетки.
align-self — вертикальное положение.
place-items: "align-self justify-self";
Выравнивание контента внутри ячейки:
Внимание: учитывая, что свойство display: grid не наследуется, для самой ячейки его тоже нужно явно задать.
Свойства работают по аналогии:
justify-content
align-content
Если нужно разместить содержимое ячейки по центру, то можно использовать:
.grid > .c5
— тогда не требуется задавать display: grid
Отствупы:
Если нужно задать отступы между ячейками, что вместо margin стоит использовать grid-gap:
.grid
«Рецепты»
space-around
У Flexbox, из коробки, есть красивое поведение при использовании
justify-content: space-around;
У Grid такого же эффекта можно добиться так:
display: grid; grid-template-columns: repeat(4, 50px); justify-items: center; justify-content: space-around;
Основной момент, это ограничение ширины ячеек через grid-template-columns, без этого ячейки растягиваются (stretch) на всю ширину и justify-content: space-around; визуально ничего не меняет.
Grid¶
В веб-дизайне очень часто встречается компоновка, состоящая из верхнего, бокового, основного и нижнего колонтитулов.
На протяжении многих лет существовало множество способов решения этой проблемы, но с помощью CSS grid она не только относительно проста, но и имеет множество вариантов. Сетка позволяет сочетать контроль, обеспечиваемый внешними размерами, с гибкостью внутренних размеров, что делает ее идеальным решением для такого рода макетов. Это связано с тем, что сетка — это метод компоновки, предназначенный для двухмерного содержимого. То есть для одновременной компоновки в строках и столбцах.
При создании макета сетки задается сетка со строками и столбцами. Затем вы размещаете элементы на этой сетке или позволяете браузеру автоматически размещать их в созданных ячейках. Сетка — это очень много, но, ознакомившись с ее возможностями, вы сможете создавать макеты в кратчайшие сроки.
Обзор¶
Что же можно делать с помощью сетки? Сетчатые макеты обладают следующими возможностями. В этом руководстве вы узнаете обо всех из них.
- Сетка может быть определена с помощью строк и столбцов. Вы можете выбрать размер этих строк и столбцов, или они могут реагировать на размер содержимого.
- Прямые дочерние элементы контейнера сетки будут автоматически помещены в эту сетку.
- Или вы можете разместить элементы в нужном вам месте.
- Линии и области сетки можно назвать, чтобы облегчить размещение.
- Свободное место в контейнере сетки может быть распределено между дорожками.
- Элементы сетки могут быть выровнены в пределах своей области.
Терминология Grid¶
В терминологии Grid много нового, поскольку в CSS впервые появилась реальная система разметки.
Линии сетки¶
Сетка состоит из линий, которые идут по горизонтали и вертикали. Если сетка имеет четыре колонки, то в ней будет пять линий колонок, включая линию после последней колонки.
Линии нумеруются, начиная с 1, причем нумерация соответствует режиму записи и направлению сценария компонента. Это означает, что строка столбца 1 будет располагаться слева на языке, написанном слева направо, например, на английском, и справа на языке, написанном справа налево, например, на арабском.
Треки сетки¶
Треком называется пространство между двумя линиями сетки. Треки строк находятся между двумя линиями строк, а треки столбцов — между двумя линиями столбцов. При создании сетки мы создаем эти треки, назначая им размер.
Ячейка сетки¶
Ячейка сетки — это наименьшее пространство на сетке, определяемое пересечением треков строк и столбцов. Это так же, как ячейка таблицы или ячейка электронной таблицы. Если задать сетку и не разместить ни одного элемента, то они будут автоматически размещены по одному элементу в каждой заданной ячейке сетки.
Область сетки¶
Несколько ячеек сетки вместе. Области сетки создаются, когда элемент охватывает несколько треков.
Промежутки¶
Между треками имеется промежуток или полоса. Для целей определения размеров они действуют как обычные треки. В промежуток нельзя поместить содержимое, но можно расположить элементы сетки через него.
Контейнер сетки¶
HTML-элемент, к которому применено display: grid , что создает новый контекст форматирования сетки для непосредственных дочерних элементов.
1 2 3
.container display: grid; > Элемент сетки¶
Элемент сетки — это элемент, являющийся непосредственным дочерним элементом контейнера сетки.
1 2 3 4 5
div class="container"> div class="item">div> div class="item">div> div class="item">div> div> Строки и столбцы¶
Для создания базовой сетки можно определить сетку с треками трех столбцов, двумя треками строк и промежутком между треками в 10 пикселей следующим образом.
1 2 3 4 5 6
.container display: grid; grid-template-columns: 5em 100px 30%; grid-template-rows: 200px auto; gap: 10px; > Эта сетка демонстрирует многое из того, что описано в разделе терминологии. Она имеет три трека в столбцах. Каждый трек использует свою единицу длины. В ней есть два трека для строк, один из которых использует единицу длины, а другой — auto . При использовании размера трека auto можно считать, что он имеет размер, равный размеру содержимого. По умолчанию треки имеют размер auto .
Если элемент с классом .container имеет дочерние элементы, то они сразу же выстраиваются на этой сетке. Это можно увидеть в действии в демонстрационном примере ниже.
Понять различные части сетки поможет наложение сетки в Chrome DevTools.
Откройте демонстрационный пример в Chrome. Выделите элемент с серым фоном, имеющий идентификатор container . Выделите сетку, выбрав значок сетки в DOM рядом с элементом .container . На вкладке Layout выберите в выпадающем списке Display Line Numbers, чтобы увидеть номера строк в сетке.
Внутренние ключевые слова размера¶
В дополнение к размерам длины и процента, описанным в разделе Единицы размера, треки сетки могут использовать внутренние ключевые слова для определения размера. Эти ключевые слова определены в спецификации Box Sizing и добавляют дополнительные методы определения размеров блоков в CSS, а не только треков сетки.
- min-content
- max-content
- fit-content()
Ключевое слово min-content сделает трек настолько маленьким, насколько это возможно без переполнения его содержимым. При изменении макета сетки в примере на трехколоночные треки размером min-content они станут узкими, как самое длинное слово в треке.
Ключевое слово max-content имеет обратный эффект. Треки станут достаточно широкими, чтобы все содержимое отображалось в виде одной длинной непрерывной строки. Это может привести к переполнению, так как строка не будет обернута.
Функция fit-content() поначалу действует подобно max-content . Однако, как только трек достигает размера, переданного в функцию, содержимое начинает заворачиваться. Так, функция fit-content(10em) создаст трек размером меньше 10em , если размер max-content меньше 10em , но никогда не больше 10em .
В следующей демонстрации попробуйте использовать различные ключевые слова внутреннего размера, изменяя размеры треков сетки.
В этом демонстрационном примере можно заметить, что при использовании функции auto столбцы сетки растягиваются, чтобы заполнить контейнер. Треки с автоматическими размерами будут растягиваться по умолчанию, если в контейнере сетки есть дополнительное пространство.
Единица измерения fr ¶
У нас есть существующие размеры длины, проценты, а также новые ключевые слова. Существует также специальный метод определения размеров, который работает только в сеточной компоновке. Это единица fr — гибкая длина, описывающая долю доступного пространства в контейнере сетки.
Блок fr работает аналогично использованию flex: auto в flexbox. Он распределяет пространство после того, как элементы уже размещены. Таким образом, можно получить три колонки, которые получат одинаковую долю свободного пространства:
1 2 3 4
.container display: grid; grid-template-columns: 1fr 1fr 1fr; > Поскольку блок fr делит доступное пространство, его можно комбинировать с пробелами фиксированного размера или треками фиксированного размера. Чтобы компонент имел элемент фиксированного размера, а второй трек занимал все оставшееся пространство, можно использовать в качестве треклиста grid-template-columns: 200px 1fr .
Использование различных значений для единицы fr позволит разделить пространство пропорционально. Большие значения получают больше свободного места. В демонстрационном примере ниже измените значение третьего трека.
Функция minmax() ¶
Эта функция позволяет задать минимальный и максимальный размер трека. Это может быть весьма полезно. Если взять пример блока fr , который распределяет оставшееся пространство, то его можно записать с помощью minmax() как minmax(auto, 1fr) . Grid смотрит на собственный размер содержимого, а затем распределяет доступное пространство после предоставления содержимому достаточного места. Это означает, что треки могут занимать не все свободное место в контейнере грида.
Чтобы заставить трек занимать равную долю пространства в контейнере сетки за вычетом зазоров, используйте minmax. Замените 1fr в качестве размера трека на minmax(0, 1fr) . Таким образом, минимальный размер трека будет равен 0, а не минимальному размеру содержимого. Тогда Grid возьмет весь доступный размер контейнера, вычтет размер, необходимый для любых зазоров, и разделит оставшуюся часть в соответствии с единицами измерения fr .
repeat() нотация¶
Если необходимо создать 12-колоночную сетку треков с равными колонками, можно использовать следующий CSS.
1 2 3 4 5 6 7 8
.container display: grid; grid-template-columns: minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr), minmax(0, 1fr); > Или можно записать его с помощью repeat() :
1 2 3 4
.container display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); > Функция repeat() может быть использована для повторения любого участка списка треков. Например, можно повторить шаблон треков. Также можно иметь несколько обычных треков и повторяющийся раздел.
1 2 3 4
.container display: grid; grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/ > auto-fill и auto-fit ¶
Вы можете объединить все, что узнали о размерах треков, minmax() и повторении, чтобы создать полезный шаблон с макетом сетки. Возможно, вы не хотите указывать количество треков в колонках, а хотите создать столько, сколько поместится в контейнере.
Этого можно добиться с помощью repeat() и ключевых слов auto-fill или auto-fit . В демонстрационном примере ниже grid создаст столько треков размером 200 пикселей, сколько поместится в контейнере. Откройте демонстрацию в новом окне и посмотрите, как меняется сетка при изменении размера области просмотра.
В демо-версии мы получаем столько треков, сколько поместится. Однако треки не являются гибкими. В конце трека будет пробел, пока не освободится место для другого трека размером 200 пикселей. Если добавить функцию minmax() , то можно запросить столько треков, сколько поместится, с минимальным размером 200 пикселей и максимальным 1fr . Затем Grid выстраивает треки размером 200 пикселей, и все оставшееся пространство распределяется между ними поровну.
Таким образом, создается двухмерный отзывчивый макет, не требующий никаких медиазапросов.
Между auto-fill и auto-fit существует тонкая разница. В следующей демонстрации мы рассмотрим макет сетки с использованием синтаксиса, описанного выше, но только с двумя элементами сетки в контейнере сетки. Используя ключевое слово auto-fill , можно увидеть, что были созданы пустые треки. Изменим ключевое слово на auto-fit , и треки уменьшатся до размера 0. Это означает, что гибкие треки теперь растут и занимают все пространство.
В остальном ключевые слова auto-fill и auto-fit действуют абсолютно одинаково. После заполнения первого трека между ними нет никакой разницы.
Авторазмещение¶
В демонстрационных версиях вы уже видели, как работает автоматическое размещение в сетке. Элементы размещаются на сетке по одному в каждой ячейке в том порядке, в котором они появляются в исходном тексте. Для многих макетов это может быть все, что вам нужно. Если же вам требуется больший контроль, то можно сделать несколько вещей. Первое — это настройка авторазмещения.
Размещение элементов в колонках¶
По умолчанию в макете сетки элементы размещаются вдоль строк. Вместо этого можно заставить элементы размещаться в столбцах, используя команду grid-auto-flow: column . При этом необходимо задать треки в строках, иначе элементы будут создавать собственные треки в колонках и располагаться в одной длинной строке.
Эти значения связаны с режимом записи документа. Строка всегда идет в том направлении, в котором идет предложение в режиме записи документа или компонента. В следующем демонстрационном примере можно изменить значение свойства grid-auto-flow и свойства writing-mode .
Распространение треков¶
Вы можете сделать так, чтобы некоторые или все элементы авторазмещаемого макета занимали более одного трека. Для этого используйте ключевое слово span плюс количество строк, которые необходимо охватить, в качестве значения для grid-column-end или grid-row-end .
1 2 3
.item grid-column-end: span 2; /* will span two lines, therefore covering two tracks */ > Поскольку вы не указали grid-column-start , то в качестве начального значения используется auto и размещение происходит в соответствии с правилами авторазмещения. То же самое можно указать, используя сокращение grid-column :
1 2 3
.item grid-column: auto / span 2; > Заполнение пробелов¶
При автоматическом размещении макета, когда некоторые элементы охватывают несколько треков, в сетке могут появиться незаполненные ячейки. Поведение сетки по умолчанию при полностью автоматическом размещении заключается в постоянном продвижении вперед. Элементы будут размещаться в том порядке, в котором они находятся в источнике, или в соответствии с модификацией свойства order . Если места для размещения элемента недостаточно, сетка оставит пробел и перейдет на следующий трек.
В следующем демонстрационном примере показано такое поведение. Флажок будет применять режим плотной упаковки. Он включается, если присвоить параметру grid-auto-flow значение dense . При этом значении сетка будет брать элементы, расположенные позже в макете, и использовать их для заполнения пробелов. Это может привести к тому, что отображение будет оторвано от логического порядка.
Размещение элементов¶
Многие функциональные возможности CSS Grid вам уже знакомы. Теперь давайте рассмотрим, как размещать элементы в созданной сетке.
Прежде всего, необходимо помнить, что CSS Grid Layout основана на сетке пронумерованных линий. Самый простой способ размещения элементов в сетке — это размещение их от одной строки к другой. В этом руководстве вы узнаете о других способах размещения элементов, но у вас всегда будет доступ к этим пронумерованным линиям.
Для размещения элементов по номерам строк можно использовать следующие свойства:
В них есть скороговорки, позволяющие задавать сразу и начальную, и конечную строки:
Для размещения элемента установите начальную и конечную линии области сетки, в которую он должен быть помещен.
1 2 3 4 5 6 7 8 9 10 11 12
.container display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 200px 100px); > .item grid-column-start: 1; /* start at column line 1 */ grid-column-end: 4; /* end at column line 4 */ grid-row-start: 2; /*start at row line 2 */ grid-row-end: 4; /* end at row line 4 */ > Chrome DevTools может дать визуальную подсказку по линиям для проверки места расположения элемента.
Нумерация строк соответствует режиму и направлению записи компонента. В следующем демонстрационном примере измените режим или направление написания текста, чтобы увидеть, как расположение элементов согласуется с тем, как течет текст.
Укладка элементов в стопку¶
Используя позиционирование по линиям, можно помещать элементы в одну и ту же ячейку сетки. Это означает, что элементы можно укладывать друг на друга или частично перекрывать один элемент другим. Элементы, расположенные в источнике позже, будут отображаться поверх элементов, расположенных раньше. Как и в случае с позиционированными элементами, порядок укладки можно изменить с помощью z-index .
Отрицательные номера строк¶
При создании сетки с помощью grid-template-rows и grid-template-columns создается так называемая явная сетка. Это сетка, которую вы определили и задали размер треков.
Иногда возникают элементы, которые отображаются вне этой явной сетки. Например, можно определить треки столбцов, а затем добавить несколько рядов элементов сетки, не определяя треки строк. Размер треков будет автоматически задан по умолчанию. Также можно поместить элемент с помощью grid-column-end , который находится за пределами явно заданной сетки. В обоих случаях grid создаст треки для работы макета, и эти треки называются явной сеткой.
В большинстве случаев нет разницы, с какой сеткой работать — явной или неявной. Однако при размещении объектов на основе линий можно столкнуться с основным различием между ними.
Используя отрицательные номера строк, можно размещать элементы от конечной строки явной сетки. Это может быть полезно, если требуется, чтобы элемент располагался от первой до последней строки столбца. В этом случае можно использовать grid-column: 1 / -1 . Элемент будет растягиваться прямо по явной сетке.
Однако это работает только для явной сетки. Возьмем макет с тремя рядами автоматически размещаемых элементов, где первый элемент должен простираться до последней строки сетки.
Вы можете подумать, что этому элементу можно придать значение grid-row: 1 / -1 . В приведенной ниже демонстрации видно, что это не работает. Треки создаются в неявной сетке, и нет возможности добраться до конца сетки с помощью -1 .
Изменение размера неявных треков¶
Треки, созданные в неявной сетке, по умолчанию будут иметь автоматический размер. Однако если вы хотите управлять размерами строк, используйте свойство grid-auto-rows , а для столбцов — grid-auto-columns .
Чтобы создать все неявные строки с минимальным размером 10em и максимальным размером auto :
1 2 3 4
.container display: grid; grid-auto-rows: minmax(10em, auto); > Создать неявные столбцы с шаблоном из треков шириной 100px и 200px . В этом случае первый неявный столбец будет иметь размер 100px , второй — 200px , третий — 100px и т. д.
1 2 3 4
.container display: grid; grid-auto-columns: 100px 200px; > Именованные линии сетки¶
Размещать элементы в макете может быть удобнее, если линии имеют название, а не номер. Вы можете присвоить имя любой линии сетки, добавив ее название между квадратными скобками. Можно добавить несколько имен, разделяя их пробелом внутри тех же скобок. После присвоения строкам имен их можно использовать вместо номеров.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
.container display: grid; grid-template-columns: [main-start aside-start] 1fr [aside-end content-start] 2fr [content-end main-end]; /* a two column layout */ > .sidebar grid-column: aside-start / aside-end; /* placed between line 1 and 2*/ > footer grid-column: main-start / main-end; /* right across the layout from line 1 to line 3*/ > Области шаблона сетки¶
Можно также присвоить области сетки имя и поместить элементы в эти области. Это очень удобная техника, поскольку она позволяет увидеть, как выглядит ваш компонент, прямо в CSS.
Для начала задайте имя прямым дочерним элементам контейнера сетки с помощью свойства grid-area :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
header grid-area: header; > .sidebar grid-area: sidebar; > .content grid-area: content; > footer grid-area: footer; > Имя может быть любым, кроме ключевых слов auto и span . После того как все элементы названы, с помощью свойства grid-template-areas определите, какие ячейки сетки будет занимать каждый элемент. Каждая строка определяется в кавычках.
1 2 3 4 5 6 7 8
.container display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: 'header header header header' 'sidebar content content content' 'sidebar footer footer footer'; > При использовании grid-template-areas существует несколько правил.
- Значение должно представлять собой полную сетку без пустых ячеек.
- Для разделения треков повторяйте имя.
- Области, созданные повторением имени, должны быть прямоугольными и не могут быть разъединены.
При нарушении любого из перечисленных правил значение будет считаться недействительным и отбрасываться.
Чтобы оставить белое пространство на сетке, используйте символ . или несколько символов без пробела между ними. Например, чтобы оставить пустой самую первую ячейку сетки, можно добавить серию символов . :
1 2 3 4 5 6 7 8
.container display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: '. header header header' 'sidebar content content content' 'sidebar footer footer footer'; > Поскольку весь макет задан в одном месте, его легко переопределить с помощью медиазапросов. В следующем примере я создал двухколоночный макет, который переходит в трехколоночный путем переопределения значений grid-template-columns и grid-template-areas . Откройте пример в новом окне, чтобы поиграть с размером области просмотра и увидеть, как меняется макет.
Вы также можете увидеть, как свойство grid-template-areas связано с write-mode и направлением, как и в других методах сетки.
Короткие свойства¶
Существуют два свойства, позволяющие задавать многие свойства сетки одним махом. Они могут показаться немного запутанными, пока вы не разберетесь, как именно они связаны между собой. Использовать ли их или предпочесть длинную форму — решать вам.
grid-template ¶
Свойство grid-template является сокращением для grid-template-rows , grid-template-columns и grid-template-areas . Сначала определяются строки, а затем значение grid-template-areas . Размер столбцов добавляется после символа / .
1 2 3 4 5 6 7
.container display: grid; grid-template: 'head head head' minmax(150px, auto) 'sidebar content content' auto 'sidebar footer footer' auto / 1fr 1fr 1fr; > Свойство grid ¶
Сокращение grid может быть использовано точно так же, как и сокращение grid-template . При его использовании все остальные свойства сетки, которые он принимает, будут возвращены к исходным значениям. Полный набор таков:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
Это сокращение можно использовать, например, для определения поведения неявной сетки:
1 2 3 4
.container display: grid; grid: repeat(2, 80px) / auto-flow 120px; > Выравнивание¶
В сетчатой верстке используются те же свойства выравнивания, о которых вы узнали из руководства по flexbox. В сетке свойства, начинающиеся с justify- , всегда используются на оси inline — направлении, в котором идут предложения в вашем режиме написания.
Свойства, начинающиеся с align- , используются на оси блока, в направлении, в котором располагаются блоки в режиме написания текста.
- justify-content и align-content : распределяют дополнительное пространство в контейнере сетки вокруг или между треками.
- justify-self и align-self : применяются к элементу сетки для его перемещения внутри области сетки, в которую он помещен.
- justify-items и align-items : применяются к контейнеру сетки для установки всех свойств justify-self для элементов.
Распределение дополнительного пространства¶
В данном примере сетка больше, чем пространство, необходимое для размещения треков фиксированной ширины. Это означает, что у нас есть пространство как в линейных, так и в блочных размерах сетки. Попробуйте различные значения align-content и justify-content , чтобы увидеть, как ведут себя треки.
Обратите внимание, что при использовании таких значений, как space-between , зазоры становятся больше, а любой элемент сетки, охватывающий два трека, также увеличивается, чтобы занять дополнительное пространство, добавленное к зазору.
Как и в случае с flexbox, эти свойства работают только при наличии дополнительного пространства для распределения. Если треки сетки аккуратно заполняют контейнер, то распределять пространство не придется.
Перемещение содержимого¶
Элементы с цветом фона полностью заполняют область сетки, в которую они помещены, поскольку начальным значением для justify-self и align-self является stretch .
Если элемент представляет собой изображение или что-то другое с присущим ему соотношением сторон, то во избежание растягивания элементов по форме начальным значением будет start , а не stretch .
В демонстрационном примере измените значения justify-items и align-items , чтобы увидеть, как при этом меняется расположение элементов. Область сетки не изменяет размер, вместо этого элементы перемещаются внутри заданной области.
Ресурсы¶
В данном руководстве представлен обзор различных частей спецификации макета сетки. Чтобы узнать больше, обратитесь к следующим ресурсам.
- MDN Сетка CSS Grid Layout
- Полное руководство по сетке
- Создание контейнера сетки
- Инспектирование CSS-сетки в Chrome DevTools
- Полная коллекция учебных материалов по сетке
Основные понятия Grid Layout
Грид-раскладка (CSS Grid Layout) представляет собой двумерную систему сеток в CSS. Гриды подойдут и для верстки основных областей страницы, и небольших элементов пользовательского интерфейса. Эта статья даёт общее представление о грид-раскладке и новой терминологии, которая является частью спецификации CSS Grid Layout Level 1. Более подробно показанные возможности будут описаны описаны далее в руководстве.
Что такое грид?
Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. Грид имеет следующие особенности:
Фиксированные и гибкие размеры полос
Вы можете создать грид с фиксированными размерами полоc, например используя пиксели. Это установит грид на определенный пиксель, соответствующим желаемому макету. Вы также можете создать грид с гибкими размерами, используя проценты или новую единицу измерения — « fr », разработанную для этой цели.
Расположение элемента
Вы можете размещать элементы в заданном месте на гриде используя номера строк, имена или путём привязки к области грида. Грид также содержит алгоритм управления размещением элементов, не имеющих явной позиции на гриде.
Создание дополнительных полос для хранения контента
Вы можете определить явную сетку с помощью грид-раскладки. Cпецификация грид-раскладки достаточно гибкая, чтобы добавить при необходимости дополнительные строки и колонки. Также в нее включены такие возможности как, например, добавление «стольких колонок, сколько будет помещено в контейнер».
Управление выравниванием
Грид содержит механизм выравнивания, таким образом мы можем контролировать, как элементы выравниваются после размещения в области сетки и как выравнивается вся сетка.
Управление перекрывающимся контентом
В ячейку или область грида может быть помещено несколько элементов; эти элементы могут частично перекрывать друг друга. Такое наложение можно контролировать с помощью свойства z-index .
Грид – это мощная спецификация, и в сочетании с другими частями CSS, такими как flexbox, поможет вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем грид-контейнере.
Грид-контейнер
Мы создаём grid контейнер, объявляя на элементе display: grid или display: inline-grid . Как только мы это сделаем, все прямые потомки этого элемента станут элементами сетки.
В этом примере у меня есть контейнер div с классом-обёрткой и пятью дочерними элементами внутри.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
Я сделал .wrapper грид-контейнером.
.wrapper display: grid; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Все прямые потомки теперь являются грид-элементами. В браузере вы не увидите разницы с тем, как элементы отображались до помещения их в грид, поскольку грид сделан как одноколоночная сетка. На этой стадии вам, возможно, будет удобнее работать с инструментом «Грид-инспектор» (en-US) , который является частью «Инструментов веб-разработчика» Firefox (Firefox’s Developer Tools). Если вы просмотрите этот пример в Firefox и проинспектируете грид, вы увидите маленький значок рядом с значением grid . Нажмите на него и сетка на этом элементе будет наложена в окне браузера.
По мере вашего обучения и последующей работы с грид-раскладкой этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашим гридом.
Если мы хотим, чтобы пример стал более похожим на сетку, нам нужно добавить полосы-колонки.
Грид-треки (грид-полосы)
Мы определяем ряды и колонки в нашей сетке при помощи свойств grid-template-columns и grid-template-rows . Это определения грид-треков (грид-полос). Грид-трек – это промежуток между любыми двумя линиями грида. На изображении ниже вы можете увидеть подсвеченный трек – это первый трек-строка в нашем гриде.
Базовый пример
Я могу дополнить пример выше, добавив свойство grid-template-columns и задав размеры треков-колонок.
Сейчас я создал грид с тремя колонками шириной по 200px. Каждый дочерний элемент будет располагаться в отдельной ячейке грида.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 200px 200px 200px; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Единица измерения «fr»
Размер треков может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать гибкие (flexible) грид-треки. Новая единица длины « fr » представляет собой долю (fraction) доступного пространства в грид-контейнере. Следующее определение грида создаст три одинаковых по ширине трека, расширяющихся и сужающихся в соответствии с доступным пространством.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Разные размеры
В следующем примере мы создаём грид с треком в 2fr и двумя треками по 1fr . Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части – два оставшихся.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 2fr 1fr 1fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Смешение гибких и фиксированных размеров
В последнем примере смешаем треки с абсолютными размерами и треки с размерами, определенными в fr . Первый трек – 500 пикселей, фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя гибкими треками.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 500px 1fr 2fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Задание треков с помощью нотации repeat()
В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить всю структуру треков или её часть. Например, определение грида:
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; >
Может быть также записано как:
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); >
Repeat-нотация может быть использована для части структуры треков. В следующем примере я создал грид с начальным треком в 20 пикселей, затем повторил секцию с шестью треками по 1fr и завершил 20-пиксельным треком.
.wrapper display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; >
Repeat-нотация принимает список треков и использует его для создания повторяющегося шаблона треков. В следующем примере мой грид состоит из 10 треков: за треком в 1fr следует трек в 2fr . Этот шаблон будет повторен пять раз.
.wrapper display: grid; grid-template-columns: repeat(5, 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 пикселей.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Масштабирование треков и minmax()
При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк нам может понадобиться задать трекам минимальный размер, но при этом быть уверенными, что они треки растянутся, чтобы вместить весь добавленный в них контент. Например, мне нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает 300 пикселей в высоту, я бы хотел растянуть строку на эту высоту.
В гриде есть решение этой задачи – функция minmax() . В следующем примере я использую minmax() в качестве grid-auto-rows (en-US). То есть автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум – примут значение auto . Использование auto означает следующее: высота строки «растягивается» до размера ячейки с самым высоким элементом контента.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
div class="wrapper"> div>Onediv> div> Two p>I have some more content in.p> p>This makes me taller than 100 pixels.p> div> div>Threediv> div>Fourdiv> div>Fivediv> div>
Грид-линии
Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, для использования при размещении элементов. В нашем гриде с тремя колонками и двумя рядами у нас есть четыре линии колонок.
Линии пронумерованы в соответствии с режимом написания (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. Остальные элементы самостоятельно размещаются в свободном месте на гриде.
div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div class="box5">Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box2 grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Примечание: Не забывайте, что вы можете использовать Grid Inspector (en-US) в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
Сокращения при использовании размещения по линиям
Обычные значения, использованные выше, могут быть умещены в одну строку: для колонок – с использованием grid-column , для строк – с использованием grid-row (en-US). Следующий пример сделает такое же расположение, как и предыдущий, но с менее громоздким кодом CSS. значение до слэша («/») – это первая линия, значение после – последняя линия.
Можно опустить конечное значение, если область занимает только один трек.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column: 1 / 4; grid-row: 1 / 3; > .box2 grid-column: 1; grid-row: 3 / 5; >
Грид-ячейки
Грид-ячейка – наименьшая часть на гриде. Концептуально она похожа на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке заданного грида. На рисунке ниже я выделил первую ячейку грида.
Грид-области
Элементы могут занимать одну или несколько ячеек внутри строки или колонки, таким образом, создаётся грид-область. Грид-области должны быть перпендикулярными – невозможно создать область, например, в форме буквы «L». Выделенная грид-область на рисунке ниже занимает два строчных трека и два колоночных.
Промежутки
Промежутки (gutters), или дорожки (alleys), между грид-ячейками могут быть созданы с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US), или с помощью сокращённого свойства grid-gap (en-US). В примере ниже я создаю 10-пиксельный промежуток между колонками и промежуток в 1em между строками.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 1em; >
Примечание: Когда грид был добавлен в браузеры, у свойств column-gap , row-gap и gap был префикс «grid-»: «grid-column-gap», «grid-row-gap» «grid-gap» соответственно.Сейчас все браузеры поддерживают значения без префикса, однако версии с префиксом будут поддерживаться как псевдонимы, что делает их использование безопасным.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Пространство, занимаемое промежутками, будет учитываться как пространство, расположенное перед гибкими треками, заданными с помощью fr , и приписанное к длине этих треков, и промежутки служат для задания размеров как обычные грид-треки, однако в промежутках нельзя ничего размещать. С точки зрения размещения по линиям, промежутки действуют в роли толстой линии.
Вкладывание гридов
Грид-элемент может быть и грид-контейнером. В следующем примере у меня есть созданный ранее трёхколоночный грид, с двумя нашими размещенными элементами. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в нормальном потоке документа.
Вкладывание без подгридов
Если я задам для box1 значение display: grid , я могу установить для него структуру треков, и он тоже станет гридом. Элементы будут размещены на этом новом гриде.
.box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); >
div class="wrapper"> div class="box box1"> div class="nested">adiv> div class="nested">bdiv> div class="nested">cdiv> div> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .box1 grid-column: 1 / 4; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства gap родителя и линии вложенного грида не выравниваются по линиям родительского грида.
Подгрид (Subgrid)
В рабочих черновиках спецификации гридов второго уровня есть функциональность, называемая подгридом, которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.
Примечание: Эта функция поддерживается в браузере Firefox 71, который в настоящее время является единственным браузером, обеспечивающим выполнение подгрида.
Согласно этой спецификации, мы можем отредактировать приведенный выше пример вложенного грида, изменив grid-template-columns: repeat(3, 1fr) на grid-template-columns: subgrid . Вложенный грид будет использовать родительскую структуру треков для размещения элементов.
.box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: subgrid; >
Размещение элементов с помощью z-index
Несколько грид-элементов могут занимать одну и ту же ячейку и поэтому мы можем использовать свойство z-index , чтобы контролировать порядок наложения перекрывающихся элементов.
Наложение без z-index
Если мы вернемся к нашему примеру с элементами, размещёнными по номерам линий, мы можем изменить его, чтобы два элемента перекрывались:
div class="wrapper"> div class="box box1">Onediv> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box2 grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Элемент box2 теперь перекрывает box1 , он отображается сверху, поскольку в исходном коде находится ниже.
Управление порядком отображения
Мы можем управлять порядком наложения элементов с помощью свойства z-index – точно так же, как позиционированными элементами. Если мы зададим для box2 значение z-index , меньшее, чем у box1 , он отобразится под элементом box1 .
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; z-index: 2; > .box2 grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; z-index: 1; >
div class="wrapper"> div class="box box1">Onediv> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Что дальше?
В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите к следующей части нашего руководства, где мы начнём углубляться в детали CSS Grid Layout.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал
Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.
Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.
В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.
Без дальнейших предисловий.
Оглавление
- Flexbox
-
- Терминология
- Свойства флекс-контейнера
- Свойства флекс-элементов
- Примеры
- Полезные ресурсы
- Терминология
- Пример
- Свойства грид-контейнера
- Свойства грид-элементов
- Полезные ресурсы
Flexbox (Flex, далее по тексту — Флекс)
Терминология
Флекс — это не отдельное свойство, но целый модуль, включающий набор свойств. Некоторые из этих свойств добавляются к контейнеру (родительскому элементу, известному как «флекс-контейнер» (flex container, далее по тексту — контейнер)), другие — к дочерним элементам (известным как «флекс-элементы» (flex items, далее по тексту — элементы)).
«Обычный» макет основан на потоке из блочных и строчных элементов, а флекс-макет — на «флекс-потоке» (flex-flow directions). Посмотрите на это изображение из спецификации, демонстрирующее ключевые идеи, лежащие в основе флекс-макета.
Элементы располагаются вдоль основной (главной) оси (main axis) (от main-start до main-end) или вдоль поперечной оси (cross axis) (от cross-start до cross-end).
- основная ось — главная ось контейнера, ось, вдоль которой располагаются элементы. Она не обязательно является горизонтальной; это зависит от свойства «flex-direction» (направление, см. ниже)
- main-start | main-end — элементы располагаются в контейнере от main-start до main-end
- основной размер (main size) — ширина или высота элемента в зависимости от основного измерения (main dimension), основной размер элемента
- поперечная ось — ось, перпендикулярная основной. Ее направление зависит от направления основной оси
- cross-start | cross-end — строки контейнера заполняются элементами, которые располагаются от cross-end до cross-start
- поперечный размер (cross size) — ширина или высота элемента в зависимости от основного измерения
Свойства флекс-контейнера
display
Данное свойство определяет флекс-контейнер; блочный или строчный в зависимости от присвоенного значения. Оно включает «флекс-контекст» для всех прямых потомков контейнера.
.container < display: flex; /* или inline-flex */ >Обратите внимание, что свойства CSS-колонок в контейнере не работают.
flex-direction (направление)
Данное свойство определяет основную ось, направление, по которому размещаются элементы в контейнере. Флекс сам по себе (без расширяющих его функционал оберток) реализует концепцию однонаправленного макета. Поэтому элементы размещаются либо в горизональных строках, либо в вертикальных колонках.
.container
- row (по умолчанию): элементы располагаются слева направо в ltr или справа налево в rtl
- row-reverse: обратный row порядок расположения элементов — справа налево в ltr или слева направо в rtl
- column: аналогично row, но сверху вниз
- column-reverse: аналогично row-reverse, но снизу вверх
flex-wrap (перенос, переход, разделение)
По умолчанию, все элементы помещаются в одну строку. С помощью данного свойства можно позволить элементам перемещаться на следующую строку при необходимости.
.container
- nowrap (по умолчанию): все элементы располагаются на одной строке
- wrap: элементы могут располагаться на нескольких строках сверху вниз
- wrap-reverse: элементы могут располагаться на нескольких строках снизу вверх
flex-flow (поток)
Данное свойство является сокращением для flex-direction и flex-wrap, которые определяют основную и поперечную оси контейнера. Значением по умолчанию является row nowrap.
.container
justify-content (выравнивание контента в одной строке)
Данное свойство определяет выравнивание элементов вдоль основной оси. Оно позволяет распределять свободное пространство, оставшееся неиспользованным элементами с фиксированным размером или гибкими элементами, достигшими максимального размера. Оно также позволяет управлять выравниванием при переполнении строки элементами.
.container
- flex-start (по умолчанию): элементы сдвигаются в начало контейнера вдоль основной оси
- flex-end: элементы сдвигаются в конец контейнера
- start: элементы сдвигаются в начало контейнера, определяемое значением свойства «writing-mode» (направление письма)
- end: элементы сдвигаются в конец контейнера, определяемый значением свойства «writing-mode»
- left: элементы прижимаются к левому краю контейнера; без flex-direction поведение аналогично start
- right: элементы прижимаются к правому краю контейнера; без flex-direction поведение аналогично start
- center: элементы выравниваются по центру
- space-between: элементы выравниваются таким образом, что первый элемент находится в начале строки, последний — в конце, а остальные элементы равномерно распределяются по оставшемуся пространству
- space-around: элементы равномерно распределяются с одинаковым пространством по краям. Обратите внимание, что визуально пространство между элементами и краями контейнера не является одинаковым; это объясняется тем, что элементы занимают определенное пространство по обеим сторонам. Первый элемент занимает одну часть пространства от края контейнера, но две части до второго элемента, поскольку второй элемент также занимает одну часть пространства со стороны первого элемента
- space-evenly: элементы размещаются таким образом, чтобы пространство между любыми двумя элементами являлось одинаковым
Что касается дополнительных ключевых слов «safe» и «unsafe», то использование safe позволяет избежать отрисовки элементов за пределами страницы, независимо от позиционирования, что, в свою очередь, исключает возможность появления прокрутки.
align-items (выравнивание элементов)
Данное свойство определяет, как элементы располагаются вдоль поперечной оси. Его можно сравнить с justify-content применительно к поперечной оси (перпендикулярной основной).
.container
- stretch (по умолчанию): элементы растягиваются, чтобы заполнить весь контейнер (зависит от их min-width/max-width)
- flex-start / start / self-start: элементы смещаются к началу поперечной оси. Различия между указанными свойствами несущественны и зависят от flex-direction или writing-mode
- flex-end / end / self-end: элементы смещаются в конец поперечной оси. Различия между указанными свойствами несущественны и зависят от flex-direction или writing-mode
- center: элементы выравниваются по центру
- baseline: элементы выравниваются вдоль их основной линии
align-content (выравнивание содержимого в нескольких строках)
Данное свойство определяет выравнивание строк контейнера при наличии свободного пространство вдоль поперечной оси. Оно похоже на justify-content, которое распределяет пространство между отдельными элементами вдоль основной оси.
Обратите внимание, что рассматриваемое свойство применяется только в отношении содержимого контейнера, располагающегося на нескольких строках, когда свойство «flex-wrap» установлено в значение «wrap» или «wrap-reverse». В отношении однострочного контейнера (когда свойство «flex-wrap» имеет стандартное значение «no-wrap») применение align-content не будет иметь никакого эффекта.
.container
- normal (по умолчанию): строки находится на обычных позициях
- flex-start / start: строки сдвигаются в начало контейнера. flex-start зависит от flex-direction, а start — от writing-mode
- flex-end / end: строки сдвигаются в конец контейнера. flex-end зависит от flex-direction, а end — от writing-mode
- center: строки выравниваются по центру
- space-between: строки располагаются таким образом, что первая строка находится в начале контейнера, последняя — в конце, а остальные строки распределяются равномерно
- space-around: строки располагаются с одинаковым пространством между ними
- space-evenly: строки располагаются с одинаковым пространством вокруг каждой из них
- stretch: строки растягиваются, занимая все доступное пространство
Свойства флекс-элементов
order (порядок)
По умолчанию, элементы располагаются в контейнере в том порядке, в котором указаны в разметке. Данное свойство позволяет этим управлять.
.item < order: 5; /* по умолчанию равняется 0 */ >flex-grow (рост, расширение)
Данное свойство определяет способность элемента к расширению при необходимости. Оно принимает целочисленное значение, которое выступает в качестве пропорции. Пропорция определяет, какое количество доступного пространства в контейнере может занимать элемент.
Если все элементы имеют свойство «flex-grow» со значением 1, доступное пространство будет между ними распределяться равномерно. Если значением flex-grow одного из элементов является 2, данный элемент будет занимать двойную порцию пространства по сравнению с остальными элементами (или, по крайней мере, попытается это сделать).
.item < flex-grow: 4; /* по умолчанию 0 */ >Отрицательные значения невалидны.
flex-shrink (сжатие, сокращение)
Данное свойство определяет способность элемента к сжатию при необходимости.
.item < flex-shrink: 3; /* по умолчанию 1 */ >Отрицательные значения невалидны.
flex-basis
Данное свойство определяет стандартный размер элемента перед распределением оставшегося пространства. Этим размером может быть длина (например, 20%, 5rem и т.д.) или ключевое слово. Ключевое слово «auto» означает использование значения свойства «width» или «height» элемента (раньше вместо auto использовалось main-size). Ключевое слово «content» означает учет содержимого элемента. Указанное ключевое слово пока плохо поддерживается, поэтому сложно определить разницу между min-content, max-content и fit-content.
.item < flex-basis: | auto; /* по умолчанию auto */ >Если значением этого свойства является 0, окружающее элемента пространство не принимается в расчет. Если значением является «auto», доступное пространство распределяется согласно значению свойства «flex-grow».
flex
Данное свойство является сокращением для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) являются опциональными. Значением по умолчанию является 0 1 auto, при этом auto можно опустить.
.item < flex: none | [ ? || ] >Рекомендуется использовать данное сокращение вместо определения каждого свойства, это позволяет автоматически определять значения свойств в правильном порядке.
align-selt (выравнивание отдельного элемента)
Данное свойство позволяет перезаписывать дефолтное или установленное с помощью align-self выравнивание отдельного элемента.
См. объяснение align-items для доступных значений.
.item
Обратите внимание, что float, clear и vertical-align применительно к флекс-элементу не имеют никакого эффекта.
Примеры
Начнем с очень простого примера — решения проблемы выравнивания элемента по центру.
.parent < display: flex; height: 300px; /* Или любое другое значение */ >.child < width: 100px; /* Или любое другое значение */ height: 100px; /* Или любое другое значение */ margin: auto; /* Волшебство! */ >Это работает благодарю тому, что свойство «margin» со значением «auto» поглащает все доступное пространство флекс-контейнера. Поэтому установка значения вертикальных внешних отступов в auto приводит к идеальному центрированию элемента по обеим осям.
Теперь попробуем использовать больше свойств. У нас имеется 6 элементов фиксированного размера, способных перестраиваться в зависимости от ширины экрана без участия медиа-запросов. Мы хотим, чтобы доступное пространство основной оси распределялось между элементами равномерно.
.flex-container < /* Сначала мы создаем контекст флекс-макета */ display: flex; /* Затем мы определяем направление потока, позволяя элементам переходить на следующую строку при необходимости * Указанное свойство и его значения аналогичны следующему: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Наконец, мы определяем, как должно распределяться оставшееся пространство */ justify-content: space-around; >Готово. Осталось немного стилизовать:
Попробуем что-нибудь еще. Предположим, что в шапке сайта у нас имеется навигационное меню, выровненное по правому краю, и мы хотим, чтобы оно распологалось по центру на средних экранах и выстраивалось в одну колонку на маленьких экранах. Проще простого.
/* Большие экраны */ .navigation < display: flex; flex-flow: row wrap; /* Это выравнивает элементы по правому краю вдоль основной оси */ justify-content: flex-end; >/* Средние экраны */ @media (max-width: 800px) < .navigation < /* На средних экранах мы выравниваем меню по центру за счет равномерного распределения доступного пространства между элементами */ justify-content: space-around; >> /* Маленькие экраны */ @media (max-width: 500px) < .navigation < /* На маленьких экранах мы меняем направление основной оси с горизонтального (строка) на вертикальное (колонка) */ flex-direction: column; >>Поэкпериментируем с гибкостью элементов. Как насчет создания mobile-first трехколоночного макета с полноразмерной шапкой и подвалом, который не зависит от порядка расположения элементов в разметке.
.wrapper < display: flex; flex-flow: row wrap; >/* С помощью flex-basis мы устанавливаем значение ширины элементов в 100% */ .wrapper > * < flex: 1 100%; >/* Порядок расположения элементов в разметке следующий * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Средние экраны */ @media all and (min-width: 600px) < /* Мы указываем сайдбарам делить между собой строку */ .aside < flex: 1 auto; >> /* Большие экраны */ @media all and (min-width: 800px) < /* Мы меняем первый сайдбар и main местами * И указываем main занимать в 2 раза больше места, чем сайдбары */ .main < flex: 2 0px; >.aside-1 < order: 1; >.main < order: 2; >.aside-2 < order: 3; >.footer < order: 4; >>Полезные ресурсы
- Спецификация
- MDN
- Игра Flexbox Froggy
Поддержка
Grid (далее по тексту — Грид или Сетка)
CSS Grid Layout на сегодняшний день является самым мощным средством создания макетов страниц. Он представляет собой двунаправленную систему. Это означает, что он может работать как со строками, так и с колонками, в отличие от Флекс, который умеет работать только со строками. Грид включает в себя свойства родительского элемента (Grid Container, грид-контейнер, далее по тексту — контейнер) и свойства дочерних элементов (Grid Elements, грид-элементы, далее по тексту — элементы).
Терминология
Грид-контейнер (Grid Container, далее по тексту — контейнер)
Элемент, которому присвоено свойство «display» со значением «grid», становится грид-контейнером. Данный контейнер является прямым предком всех грид-элементов. В следующем примере элемент «div» с классом «container» является грид-контейнером.
Грид-линия (Grid Line, далее по тексту — линия)
Разделительная линия, формирующая структуру Сетки. Она может быть вертикальной или горизонтальной и обозначает границу строки или колонки. Желтая линия на изображении ниже — это пример вертикальной грид-линии (грид-линии колонки).
Грид-трек (Grid Track, далее по тексту — трек или дорожка)
Пространство между двумя смежными линиями. Вы можете думать о треках как о строках или колонках Грида. Вот пример дорожки между второй и третьей линиями.
Грид-область (Grid Area, далее по тексту — область)
Общее пространство между четырьмя линиями. Область может занимать любое количество грид-ячеек. Вот пример области между горизонтальными линиями 1 и 3 и вертикальными линиями 1 и 3.
Грид-элемент (Grid Element, далее по тексту — элемент)
Дочерний элемент (прямой потомок) контейнера. В следующем примере элементы с классом «item» являются грид-элементами, а элемент с классом «sub-item» — нет.
Грид-ячейка (Grid Cell, далее по тексту — ячейка)
Пространство между двумя смежными горизонтальными и вертикальными линиями. Это элементарная единица Сетки. Вот пример ячейки между горизонтальными линиями 1 и 2 и вертикальными линиями 2 и 3.
Пример
Колонки с гибкой шириной, которые автоматически перестраиваются в зависимости от ширины экрана без медиа-запросов.
.grid < display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Для маленьких экранов можно добавить min() */ /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */ grid-gap: 1rem; /* Данное свойство является стандартным, но хуже поддерживается */ /* gap: 1rem */ >Свойства грид-контейнера
display
Данное свойство делает элемент грид-контейнером и устанавливает грид-контекст для его содержимого.
.container
- grid — блочная Сетка
- inline-grid — строчная Сетка
grid-template-columns, grid-template-rows
Данные свойства определяют колонки и строки Сетки с разделенными пробелами значениями. Значения представляют собой размер трека, а пробелы — линию.
.container
- — длина, проценты или фракции свободного пространства Грида (используется единица измерения «fr»)
- — произвольное название
.container
Вы можете явно указывать названия линий. Обратите внимание на квадратные скобки:
.container
Линии могут иметь несколько названий. Здесь, например, вторая линия имеет два названия:
.container
Если определение содержит повторяющиеся фрагменты, можно использовать инструкцию «repeat» для сокращения:
.container
Что эквивалентно следующему:
.container
Если несколько линий имеют одинаковые имена, можно использовать название линии и количество таких линий.
.item
Единица «fr» позволяет установить размер трека как фракцию свободного пространства контейнера. В примере ниже ширина каждого элемента равняется трети ширины контейнера:
.container
Свободное пространство вычисляется после вычитания элементов фиксированного размера. В следующем примере пространство, доступное для распределения с помощью единицы «fr» не включает 50px:
.container
grid-template-areas
Данное свойство определяет шаблон Сетки с помощью названий областей, определенных в свойствах «grid-area». Повторение названий областей заставляет контент расширяться на указанное количество ячеек. Точка означает пустую ячейку. Такой синтаксис позволяет визуализировать структуру Сетки.
.container
- — название области
- . — пустая ячейка
- none — область отсутствует
.item-a < grid-area: header; >.item-b < grid-area: main; >.item-c < grid-area: sidebar; >.item-d < grid-area: footer; >.container
Этот код создает Сетку шириной в четыре колонки и высотой в три строки. Первая (верхняя) строка полностью занимается шапкой. Средняя строка состоит из двух областей «main», одной пустой ячейки и одной области «sidebar». Последняя строка — подвал.
Каждая строка в определении должна состоять из одинакового количества колонок.
Для обозначения пустой ячейки можно использовать любое количество точек. До тех пор, пока между точками нет проблема, они являются индикатором пустой ячейки.
Обратите внимание, что данный синтаксис применяется для обозначения областей, а не линий. При использовании этого синтаксиса линия каждой стороны области именуется автоматически. Если названием области является «foo», то названием начальных (первых) линий (строчной и колоночной) области будет «foo-start», а последних — «foo-end». Это означает, что некоторые линии могут иметь несколько названий, как в рассмотренном примере, где верхняя левая линия имеет три названия: header-start, main-start и footer-start.
grid-template
Данное свойство является сокращением для grid-template-rows, grid-template-columns и grid-template-areas.
.container < grid-template: none | / ; >- none — сбрасывает значения всех трех свойств до дефолтных
- / — устанавливает свойствам «grid-template-rows» и «grid-template-columns» соответствующие значения, а свойству «grid-template-areas» значение «none»
.container < grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >Это эквивалентно следующему:
.container
Поскольку grid-template не сбрасывает неявные свойства Сетки (такие как grid-auto-columns, grid-auto-rows и grid-auto-flow), что требуется в большинстве случаев, вместо него рекомендуется использовать свойство «grid».
column-gap, row-gap, grid-column-gap, grid-row-gap
Данные свойства определяют размеры линий. Другими словами, они определяют величину отступов между колонками/строками.
.container < /* стандарт */ column-gap: ; row-gap: ; /* раньше */ grid-column-gap: ; grid-row-gap: ; >.container
Отступы создаются только между колонками/строками, но не по краям Сетки.
Обратите внимание, что свойства «grid-column-gap» и «grid-row-gap» в настоящее время переименованы в «column-gap» и «row-gap».
gap, grid-gap
Данное свойство является сокращением для row-gap и column-gap.
.container < /* стандарт */ gap: ; /* раньше */ grid-gap: ; >.container
Если значение свойства «row-gap» не установлено, оно принимает значение свойства «column-gap».
Обратите внимание, что свойство «grid-gap» в настоящее время переименовано в «gap».
justify-items
Данное свойство определяет выравнивание элементов в ячейках вдоль строчной (горизонтально) оси (в противоположность своству «align-items», определяющему выравнивание вдоль блочной (колоночной, вертикальной) оси). Значение этого свойства применяется ко всем элементам контейнера.
.container
- start — элементы сдвигаются в начало их ячеек (левая граница)
- end — элементы сдвигаются в конец ячеек (правая граница)
- center — элементы распологатся по центру
- stretch — элементы заполняют всю ширину ячеек
.container
.container
.container
.container
Расположение отдельного элемента вдоль строчной оси ячейки контролируется свойством «justify-self».
align-items
Данное свойство определяет выравнивание элементов в ячейках вдоль блочной (колоночной, вертикальной) оси (в противоположность свойству «justify-items», которое определяет выравнивание вдоль строчной (горизонтальной) оси). Значение этого свойства применяется ко всем элементам контейнера.
.container
- start — элементы сдвигаются в начало их ячеек (верхняя граница)
- end — элементы сдвигаются в конеч ячеек (нижняя граница)
- center — элементы располагаются по центру
- stretch — элементы заполняют всю высоту ячеек
.container
.container
.container
.container
Расположение отдельного элемента вдоль колоночной оси ячейки контролируется свойством «align-self».
place-items
Данное свойство является сокращением для align-items и justify-items.
.container < place-items: ; >- — первое значение для align-items, второе — для justify-items. Если второе значение отсутствует, первое значение присваивается обоим свойствам.
.container
Элементы располагаются по центру ячеек вдоль колоночной оси и в начале вдоль строчной оси.
justify-content (выравнивание колонок)
Порой общая ширина элементов Сетки (ее колонок) оказывается меньше ширины контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения колонок Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок (в противоположность свойству «align-content», которое определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк).
.container
- start — сдвигает Сетку в начало контейнера (левая граница)
- end — сдвигает Сетку в конец контейнера (правая граница)
- center — Сетка располагается по центру
- stretch — колонки растягиваются таким образом, чтобы Сетка занимала всю ширину контейнера
- space-around — одинаковое пространство между колонками, и половина такого пространства по краям контейнера
- space-between — первая колонка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными колонками
- space-evenly — одинаковое пространство как между колонками, так и по краям контейнера
.container
.container
.container
.container
.container
.container
.container
align-content (выравнивание строк)
Порой общая высота элементов Сетки (ее строк) оказывается меньше высоты контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения строк Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк (в противоположность свойству «justify-content», которое определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок).
.container
- start — сдвигает Сетку в начало контейнера (верхняя граница)
- end — сдвигает Сетку в конец контейнера (нижняя граница)
- center — Сетка располагается по центру
- stretch — строки растягиваются таким образом, чтобы Сетка занимала всю высоту контейнера
- space-around — одинаковое пространство между строками, и половина такого пространства по краям контейнера
- space-between — первая строка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными строками
- space-evenly — одинаковое пространство как между строками, так и по краям контейнера
.container
.container
.container
.container
.container
.container
.container
place-content
Данное свойство является сокращением для align-content и justify-content.
.container < place-content: ; >- — первое значение для align-content, второе — для justify-content. Если второе значение отсутствует, первое значение присваивается обоим свойствам.
.container
Строки располагаются по центру контейнера, колонки — в начале.
grid-auto-columns, grid-auto-rows (размер неявных треков)
Данные свойства определяют размер автоматически создаваемых дорожек (неявных треков). Неявные треки создаются при наличии большего количества элементов, чем ячеек Сетки, или при размещении элемента за пределами Сетки.
.container < grid-auto-columns: . ; grid-auto-rows: . ; >- — длина, проценты или фракции свободного пространства Сетки (используется единица измерения «fr»)
.container
Это создает Сетку размером 2х2.
Допустим, мы используем свойства «grid-column» и «grid-row» для позиционирования элементов следующим образом:
.item-a < grid-column: 1 / 2; grid-row: 2 / 3; >.item-b < grid-column: 5 / 6; grid-row: 2 / 3; >
Началом элемента с классом «item-b» является вертикальная линия 5, а концом — вертикальная линия 6, но мы не определили эти линии. Поскольку мы ссылаемся на несуществующие линии, для заполнения отступов создаются неявные треки с нулевой шириной. Мы можем использовать свойство «grid-auto-columns» для определения ширины неявных дорожек:
.container
grid-auto-flow
Для позиционирования элементов, находящихся за пределами Сетки, можно использовать алгоритм автоматического размещения (auto-placement algorithm). Рассматриваемое свойство определяет, как должен работать данный алгоритм.
.container
- row (по умолчанию) — алгоритм заполняет текущую строку до предела и, при необходимости, когда ширины текущей строки оказалось недостаточно, создает новую строку
- column — алгоритм заполняет текущую колонку до предела и, при необходимости, когда высоты текущей колонки оказалось недостаточно, создает новую колонку
- dense — интеллектуальное заполнение Сетки при наличии элементов разного размера
Предположим, что у нас имеется такая разметка:
Мы определяем Сетку, состоящую из пяти колонок и двух строк, и устанавливаем свойству «grid-auto-flow» значение «row» (которое является значением по умолчанию):
.container
При размещении элементов в Сетке, мы определяем места только двух элементов:
.item-a < grid-column: 1; grid-row: 1 / 3; >.item-e < grid-column: 5; grid-row: 1 / 3; >Поскольку значением свойства «grid-auto-flow» является «row», наша Сетка выглядит так, как показано на изображении ниже. Обратите внимание на расположение элементов с классами «item-b», «item-c» и «item-d» (предпочтение отдается строкам):
Если поменять значение свойства «grid-auto-flow» на «column», Сетка будет выглядеть следующим образом (предпочтение отдается колонкам):
grid
Данное свойство является сокращением для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (обратите внимание, что в одном объявлении могут содержаться только «явные» или «неявные» свойства).
- none — все свойства принимают значения по умолчанию
- — аналогично сокращению grid-template
- / [auto-flow && dense?] ? — определяет значение для grid-template-rows. Если справа от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «column». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-columns» опущено, его значением становится «auto»
- [auto-flow && dense?] ? / — определяет значение для grid-template-columns. Если слева от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «row». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-rows» опущено, его значением становится «auto»
.container < grid: 100px 300px / 3fr 1fr; >.container
Следующие два блока кода эквиваленты:
.container < grid: auto-flow / 200px 1fr; >.container
Следующие два блока кода эквиваленты:
.container < grid: auto-flow dense 100px / 1fr 2fr; >.container
И следующие два блока кода также эквиваленты:
.container < grid: 100px 300px / auto-flow 200px; >.container
В данном случае мы можем использовать более сложный, но в тоже время более удобный синтаксис для одновременного определения свойств «grid-template-areas», «grid-template-rows» и «grid-template-columns» и установки прочих свойств в дефолтные значения. Что для этого нужно сделать, так это определить названия линий и размеры треков с соответствующими областями на одной строке. Это проще продемонстрировать на примере:
.container < grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >Это равнозначно следующему:
.container
Свойства грид-элементов
Обратите внимание, что свойства float, display: inline-block, display: table-cell, vertical-align и column-*, применяемые к грид-элементу, не имеют никакого эффекта.
grid-column-start, grid-column-end, grid-row-start, grid-row-end
Данные свойства определяют положение элемента в Сетке через привязку к определенным линиям. grid-column-start / grid-row-start — это начальные линии элемента, а grid-column-end / grid-row-end — конечные.
.item < grid-column-start: | | span | span | auto; grid-column-end: | | span | span | auto; grid-row-start: | | span | span | auto; grid-row-end: | | span | span | auto; >- — может быть числом (привязка осуществляется к номеру линии) или названием (привязка осществляется к названию линии)
- span — элемент будет растянут на указанное количество треков
- span — элемент будет растягиваться до достижения линии с указанным названием
- auto — автоматическое расположение, автоматическое расширение или дефолтное растягивание на одну колонку
.item-a
.item-b
Если значения свойств grid-column-end / grid-row-end не определены, элемент займет 1 трек по умолчанию.
Элементы могут перекрывать друг друга. Вы можете использовать свойство z-index для управления порядком наложения элементов.
grid-column, grid-row
Данные свойства являются сокращением для grid-column-start + grid-column-end и grid-row-start + grid-row-end, соответственно.
.item < grid-column: / | / span ; grid-row: / | / span ; >- / — значения аналогичны значениям оригинальных свойств, включая span
.item-c < grid-column: 3 / span 2; grid-row: third-line / 4; >
Если конечная линия не определена, элемент по умолчанию будет занимать 1 трек.
grid-area
Данное свойство определяет название элемента, которое используется в качестве значения в свойстве grid-template-areas. grid-area также может использоваться как сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end.
.item < grid-area: | / / / ; >- — произвольное название элемента
- / / / — могут быть числами или названиями линий
.item-d
Сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end:
.item-d < grid-area: 1 / col4-start / last-line / 6; >
justify-self
Данное свойство определяет выравнивание элемента в ячейке вдоль строчной оси (в противоположность свойству align-self, которое определяет выравнивание вдоль блочной (колоночной) оси). Это свойство применяется к элементу внутри отдельной ячейки.
.item
- start — элемент сдвигается в начало ячейки (левая граница)
- end — элемент сдвигается в конец ячейки (правая граница)
- center — элемент располагается по центру
- stretch — элемент заполняет всю ширину ячейки
.item-a
.item-a
.item-a
.item-a
Для управления выравниванием всех элементов Сетки вдоль строчной оси используется свойство justify-items.
align-self
Данное свойство определяет выравнивание элемента в ячейке вдоль блочной (колоночной) оси (в противоположность свойству justify-self, которое определяет выравнивание вдоль строчной оси). Это свойство применяется к элементу внутри отдельной ячейки.
.item
- start — элемент сдвигается в начало ячейки (верхняя граница)
- end — элемент сдвигается в конец ячейки (нижняя граница)
- center — элемент располагается по центру
- stretch — элемент заполняет всю высоту ячейки
.item-a
.item-a
.item-a
.item-a
Для управления выравниванием всех элементов Сетки вдоль блочной (колоночной) оси используется свойство align-items.
place-self
Данное свойство является сокращением для align-self и justify-self.
- auto — значение по умолчанию
- / — первое значение для align-self, второе — для justify-self. Если второе значение опущено, первое значение применяется к обоим свойствам
.item-a
.item-a
Специальные функции и ключевые слова
- При определении размеров строк и колонок можно использовать не только обычные единицы измерения, такие как px, rem, % и т.д., но и такие ключевые слова, как min-content, max-content, auto и, пожалуй, самое полезное — фракции (fr). grid-template-columns: 200px 1fr 2fr min-content
- Вы также можете использовать функции, которые делают элементы масштабируемыми. Например, так можно определить элемент, шириной в 1fr, способный сжиматься до 200px: grid-template-columns: 1fr minmax(200px, 1fr)
- Функция repeat() используется для быстрого определения повторяющихся элементов: grid-template-columns: repeat(10, 1fr) (десять колонок, шириной в 1fr)
- Сочетание названных возможностей позволяет добиться невероятной гибкости макета, например: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) (из примера в начале раздела про Грид)
Полезные ресурсы
- Спецификация
- MDN
- Игра Grid Garden
Поддержка
Туториал
В данном туториале мы создадим простой тренажер по основным свойствам Flexbox.
Разметка
Add Item