За что отвечает алгоритм dense html
1. Введение
CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как столбцы так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила к родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).
Контейнер сетки Элемент к которому применяется display: grid . Это прямой родитель для всех элементов сетки. В этом примере grid-container является контейнером. 
Элемент сетки Дочерние элементы (прямы потомки) контейнера. На примере выше item это элемент сетки. Линия сетки (Grid Line) Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными (линии колонок) или горизонтальными (линии строк) и располагаться по обе стороны от строки или столбца. На изображении синяя линия является примером вертикальной линии (линией колонки). 
Трек сетки (Grid Track) Пространство между двумя соседними линиями. Трек можно представить как строку (колонка) или столбец (ряд). Вот трек между второй и третей линией строк. 
Ячейка сетки (Grid Cell) Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная единица измерения сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3. 
Область сетки (Grid Area) Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек. Вот пример области между строками 1 и 3 и колонками 1 и 3. 
Как устроен grid контейнер 
2. Сравнение с Flexbox
В отличие от Flex, которая ориентирована на одну ось, Grid оптимизирована для двумерных компоновок: когда требуется расположить (выровнять) содержимое в обоих измерениях (по вертикали и горизонтали).
Кроме того, благодаря возможности явного позиционирования элементов в сетке, Grid позволяет выполнять кардинальные преобразования в структуре, не требуя никаких изменений HTML разметки. Комбинируя медиа-запросы со свойствами CSS, управляющими компоновкой контейнера grid и его дочерних элементов, можно адаптировать верстку под любые форм-факторы устройств.
Grid и Flexbox, имеют свои особенности и нельзя сказать, что одно заменяет другое. Скорее Флекс является дополнением к Грид, или наоборот.
Flexbox фокусируется на распределении пространства внутри одной оси, использует более простой подход к компоновке, может использовать систему упаковки строк на основе размера содержимого для управления своей вторичной осью и полагается на иерархию разметки. Тогда как Grid больше подходит для создания каркасов, потому что имеет более мощный и комплексный подход и в целом не зависит от иерархии разметки. В отдельных случаях Grid позволяет создать адаптивный макет, который невозможно создать с помощью Flex или как-то еще.
Flexbox — ориентируется по одной оси 
CSS Grid — ориентируется по двум осям 
3. Поддержка браузерами
В данный момент почти все современные браузеры поддерживают Grid CSS без необходимости указывать дополнительные префиксы и покрывают 95.45% всех устройств.
Посмотреть на сайте Can I use 
4. Свойства для контейнера
display Опеределяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.
- grid — формирует сетку как блок
- inline-grid — формирует сетку как строчный элемент
- subgrid — если элемент сам является контейнером
- px, em, rem, % — может быть фиксированным размером, процентами или частью свободного пространства в сетка (определяется с помощью единицы fr — фракция
- min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.
- max-content — наибольший размер контента. Для текста это длина самой большой строки безе переносов.
- fit-content(max) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.
- minmax(min,max) — функция, позволяет разом указать минимальный и максимальный размер.
Значения:- px,em,rem. — единицы длины
- % — проценты
- fr — фракция (гибкий размер). Может использоваться только для макс. значения.
- min-content
- max-content
- auto — зависит от того, используется оно как максимальное или минимальное значение функции minmax(): если в качестве максимума, то тоже самое что max-content, если в качестве минимума, то значение будет минимальным возможным размером для ячейки. Такой размер отличается от min-content и задается свойствами min-width или min-height.
- auto-fill — повторяет ряд/колонку пока есть место в контейнере. Хотя бы одно повторение будет всегда.
- auto-fit — то же самое, но после размещения элементов оставшиеся пустыми ряд/колонка сжимаются и исчезают, в результате контейнер всегда будет выглядеть заполненным.
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- grid-template-columns: repeat(2, 100px 1fr);
- grid-area-name — имя области заданное с помощью grid-area
- . — точка обозначающая пустую ячейку
- none — области не определены
See the Pen Grid Ex1 by ismail (@itdoctor) on CodePen.
- none — устанавливает все три свойства в их начальное значение
- subgrid — устанавливает grid-template-columns и grid-template-rows в subgrid и grid-template-area в его начальное значение / grid-template-columns — устанавливает эти два свойства в определенное значение, а grid-template-area в none
- grid-template:
«header header header» 100px
«main main sidebar» 500px / 1fr 1fr 1fr; /*
100px — высота первой строки
500px — высота второй строки
1fr 1fr 1fr — ширина столбцов
*/
- line-size — значение размера, например в px
- grid-column-gap: 10px;
- grid-row-gap: 20px;
- grid-gap: 15px;
- grid-gap: grid-row-gap grid-column-gap;
- track-size — значение размера в %, px, em, rem или fr
- grid-auto-columns: 320px;
- grid-auto-rows: 1fr;
- row — говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости
- column — говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колнки при необходимости
- dense — говорит алгоритму авто-размещения заполнять дыры в сетке, если более мелкие элементы появляются позже
- none — настраивает все совйства на их начальные значения
- grid-template-rows / grid-template-columns
- grid-auto-flow grid-auto-rows / grid-auto-columns
- grid-template-areas
- grid-template
- grid: ‘header header header header’ ‘main main main right right’ ‘footer footer footer footer’;
- grid: 100px 300px / 3fr 1fr;
- grid: auto-flow dense 100px / 1fr 2fr;
- grid: 100px 300px / auto-flow 200px;
- grid: [row1-start] «header header header» 1fr [row1-end] [row2-start] «footer footer footer» 25px [row2-end] / auto 50px auto;
- grid: repeat(auto-fill, 5em) / auto-flow 1fr;
- grid: auto-flow 1fr / repeat(auto-fill, 5em);
- grid: auto 1fr auto / repeat(5, 1fr);
- grid: repeat(3, auto) / repeat(4, auto);
- start — размещает все элементы в начале ячеек (слева / сверху)
- end — размещает все элементы в конце ячеек (справа / снизу)
- center — размещает все элементы по центру ячеек
- stretch — растягивает все элементы на всю ширину / высоту ячеек
- align-items: center;
- justify-items: end;
- place-items: start;
- place-items: align-items justify-items;
- start — размещает все элементы в начале ячеек (слева / сверху)
- end — размещает все элементы в конце ячеек (справа / снизу)
- center — размещает все элементы по центру ячеек
- stretch — растягивает все элементы на всю ширину / высоту контейнера
- space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям
- space-between — одинаковое пространство между элементами, без отступов по краям
- space-evenly — одинаковое пространство между элементами и полноразмерные отступы по краям
- align-content: center;
- justify-content: end;
- place-content: start;
- place-content: align-content justify-content;
5. Свойства для дочерних элементов
grid-area Даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через свойство grid-template-areas. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end
Полное руководство по CSS Grid
CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).
Введение
CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов. Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первое, это замечательная книга от Rachel Andrew’s Get Ready for CSS Grid Layout. Это подробное и понятное введение в CSS Grid’ы, которое является основой для всей этой статьи. Я настоятельно рекомендую купить и прочитать его. Вторая вещь, которая меня вдохновила — это A Complete Guide to Flexbox (Полное руководство по Flexbox) от Chris Coyier’s, которая стала моим основным ресурсом по Flexbox. Она помогла большому количеству людей, о этом свидетельствует тот факт, что это лучший результат в поисковой выдаче при запросе»Flexbox» в Google. Вы увидите много похожего между этой статьей и моей, потому что почему бы не украсть у лучших?
Моя цель в этом руководстве — это возможность представить вам концепции CSS Grid’ов так как они существуют в самой последней версии спецификации. Поэтому я не буду освещать устаревший синтаксис для IE и сделаю всё возможное, чтобы это руководство регулярно обновлялось, по мере изменения спецификации.
Основы и поддержка браузерами
Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid, настроить размеры колонок и строк с помощью grid-template-columns и grid-template-rows, а также разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row. Так же как и во Flexbox, порядок элементов в источнике сетки, не имеет значения (прим. переводчика: в HTML разметке). Ваш CSS может размещать их в любом порядке, что собственно упрощает перегруппировку сетки с помощью медиа запросов. Представьте, что вы определяете разметку всей страницы, а затем полностью переставляете её, чтобы разместить элементы под другую ширину экрана всего лишь с помощью нескольких CSS строк кода. CSS Grid — это один из самых мощных CSS модулей, представленных когда-либо. По состоянию на март 2017 года, многие браузеры уже поддерживают CSS Grid, без префиксов: Chrome (включая Android), Firefox, Safari (включая iOS), и Opera. Internet Explorer 10 и 11 поддерживают его но с реализацией более старого синтаксиса. Была анонсирована поддержка в Edge, но её пока нет.
Grid в CSS
CSS Grid Layout — это новое многообещающее явление в мире верстки. Используя Grid, можно построить макеты, которые ранее невозможно было построить в CSS. С ним возможности чуть ли не безграничны. Grid претендует на звание «лучшей системы для вёрстки макетов HTML». В этой статье я попробую разобраться какой он, этот Grid, на вкус и доступно поделиться знаниями с вами.
- Базовые знания
- CSS свойства Grid
- Для контейнера
- display:
- grid-template-rows:
- grid-template-columns:
- grid-template-areas:
- grid-template:
- repeat() — функция
- minmax() — функция
- grid-row-gap:
- grid-column-gap:
- grid-gap:
- align-content:
- justify-content:
- place-content:
- align-items:
- justify-items:
- place-items:
- grid-auto-rows:
- grid-auto-columns:
- grid-auto-flow:
- grid:
- Для элементов
- grid-row-start:
- grid-row-end:
- grid-column-start:
- grid-column-end:
- grid-row:
- grid-column:
- grid-area:
- align-self:
- justify-self:
- place-self:
- Примеры
- # Каркас HTML страницы
- # Каркас для игрового приложения
- # Простой блок на Grid
- # Масонри на Грид
- Сравнение Flex и Grid
- Поддержка браузерами
- Видео по Grid
- Ссылки
Базовые знания
Grid — это сетка с элементами на ней. Расставлять элементы можно как угодно. Представьте себе шахматную доску и фигуры, Grid контейнер это доска, элементы это фигуры. А дальше ставь как нравится.
Grid — это набор горизонтальных и вертикальных «линий», которые пересекаются между собой и создают сетку из рядов и колонок. Элементы могут быть помещены в сетку, опираясь на номер линии или номер ряда/колонки.
Чтобы разобраться с Грид-сеткой нужно понять из чего конкретно состоит эта сетка. Для этого хорошенько изучите схему ниже и описание к ней.
Схема Grid сетки.Описание Грид сетки
Контейнер — содержит Grid сетку, в которой находятся элементы.
Элементы — HTML элементы внутри сетки. Ими станут HTML элементы первого уровня (прямые дети контейнера). Чтобы элемент появился в сетке, в нем (внутри) элемента должно быть хоть что-то (текст, другие HTML теги). Пустой элемент — это всего лишь ячейка для расположения в нем чего-либо.
Линии — это образные линии (на самом деле никаких линий нет), разделяющие сетку на колонки и ряды, они создают структуру сетки. Линии автоматически нумеруются. Также линиям можно указывать имена, чтобы потом прикреплять к ним элементы по номеру или по имени линии. По сути линия — это номер или имя колонки/ряда. Расстояние между линиями (колонками/рядами) можно указать через grid-gap: , grid-row-gap: , grid-column-gap: .
Ряд/колонка (row/column, track) — все что находится между соседними линиями, т.е. линии разделяют сетку на ряды и колонки.
Ячейка (cell) — место куда будет расположен элемент. Ячейка это пересечение колонки и ряда.
Область (area, поле) — объединение одной или нескольких ячеек в общую ячейку (поле). Это такая большая ячейка также ограниченная линиями. Области можно задать имя, чтобы удобно было помещать туда элементы.
Для включения Grid, любому HTML элементу достаточно присвоить css свойство display:grid; или display:inline-grid; .
После включения grid свойства, внутри контейнера создаются grid сетка, а все вложенные элементы (первого уровня) станут ячейками сетки.
Пример создания грид-блока с двумя колками и тремя рядами разных размеров:
Особенности Grid
Элементы Grid сетки можно расставлять сразу на несколько полей сетки. Можно менять направление или расположения элементов в сетке. Колонкам и рядам можно давать имена. Можно создавать шаблон сетки и расставлять элементы по шаблону.
Размеры колонок/рядов. Сетку можно создавать с точными или гибкими размерами колонок/рядов (шириной/высотой). Точные это px , em , % , а гибкие новая единица измерения в grid fr (фракция — свободное место в сетке).
Расположение элемента. Элементы можно размещать в указанном месте сетки, указав номер колонки/ряда или их имя (если оно есть). Или путем привязки элемента к области Grid (область нужно создать). Если не указать конкретное расположение элемента в сетке, то элемент размещается по умолчанию в первую свободную ячейку: как во flex: по горизонтали (→) или по вертикали (↓). Поведение по умолчанию можно изменить через свойство grid-auto-flow: .
Выравнивание элементов. Элементы внутри ячейки можно выравнивать по горизонтали/вертикали. Выравнивается вложенный в ячейку элемент, а не сама ячейка. Например, в контейнере есть вложенный элемент первого уровня (это ячейка), внутри него есть «текст» или какой-то «div» (текст или div — это реальный элемент) выравнивание элемента выровняет вложенный в ячейку элемент внутри ячейки (размеры ячейки при этом не изменятся).
Несколько элементов в одной ячейке. В одной ячейке или области можно разместить несколько элементов. Чтобы указать кто «выше» (важнее) и кто «ниже» (неважный), нужно использовать css свойство z-index: .
CSS свойства Grid
Для контейнера
Включает grid свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня — они станут элементами grid контейнера.
- grid — элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
- inline-grid — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
grid и inline-grid отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .
Указывают из скольки рядов (строк) и скольки колонок состоит сетка и какие у них размеры. Т.е. указывается сразу два понятия: сколько и какой размер.
В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). Сколько раз будет указан размер, столько будет рядов/колонок.
размер — это высота ряда или ширина колонки, может быть:
auto — размер ряда/колонки подстраивается под размеры элементов, так, чтобы уместился самый большой из них. Не дает сжиматься меньше min-width или min-height самого широкого или высокого элемента соответственно. Не дает растягиваться больше, чем max-content . Если в контейнере есть свободное место, то размер может растянуться до конца контейнера.
px, em, %, vh, vw — размер абсолютный (px, pt), относительный (em, vw, vh) или в % от ширины/высоты контейнера.
fr (фракция — свободное место в сетке) — специальная единица измерения в grid. Свободное место в контейнере делится на фракции, так если одной колонке указать 1fr , а другой 2fr , то вторая будет больше первой в 2 раза и обе они заполнят все свободное пространство. Аналог flex-grow: у флексов. Тут можно также указывать дробные значения: 0.5fr, 2.3fr .
min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.
max-content — наибольший размер контента. Для текста это длина самой большой строки без переносов.
fit-content( max ) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.
line-name (имя линии) — перед размером можно указать (создать) имя для линии (ряда/колонки). Имя указывается в квадратных скобках [имя] 100px . Также можно указать сразу несколько имен через пробел внутри квадратных скобок: [имя еще_имя] 100px . Символы в имени можно использовать любые, в том числе кириллицу.
У двух этих свойств есть сокращенные записи:
Примеры:
Создадим сетку (контейнер) с тремя колонками и тремя рядами последняя колонка и ряд будут иметь одинаковое имя ‘main’
Если не указать имя, то ряд/колонка автоматом получает два порядковых числовых имени: положительное и отрицательное:
Укажем конкретные имена (обратите внимание как указывается имя для последней линии):
Меню может иметь не одно, а несколько имен, этот пример добавляет два имени row1-end и row2-start :
Если в перечисление размеров колонок есть повторяющиеся части, то можно использовать функцию repeat() :
Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени и порядковому числу:
fr позволяет указать размер относительный оставшегося свободного места в контейнере. В этом примере свободное место в контейнере делится на число указанных фракций (у нас 3) и для каждой определяется ширина. Так если ширина контейнера 90px то каждая колонка будет шириной по 30px.
Свободное пространство высчитывается после того как посчитаны жесткие размеры (включая разрывы). В этом примере размер свободно пространства высчитывается как ширина контейнера минус 50px.
Позволяет создать визуальный шаблон сетки. В этом свойстве задаются имена ячейкам, а затем элементы привязываются к этим именам через свойство grid-area: указываемое для отдельного элемента.
Синтаксис шикарен, потому что визуально показывает как выглядит сетка:
«имя имя2 имя3» — в значении внутри кавычек нужно через пробелы указывать имена. Каждые кавычки с именами будут представлять собой ряд сетки, а имена внутри кавычек задают имена ячейкам внутри этого ряда.
«имя имя имя2» — если указать одно и тоже имя несколько раз подряд, то имя объединит ячейки и мы получим область (большую ячейку). Объединять ячейки таким способом можно не только внутри ряда, но и между рядами.
. (точка) — указывается вместо имени и обозначает ячейку которую нужно пропустить (пустую ячейку). Можно использовать несколько точек подряд, пока между ними нет пробела они будут считаться за одну.
-
Символы в имени можно использовать любые, в том числе кириллицу.
Каждый ряд должен иметь одинаковое количество ячеек.
При использовании этого метода линии (включая последнюю линию) получают имена автоматически. Например, если область называется bar , то имя начальной линии ряда и колонки у этой области будет bar-start , а имя последней bar-end . Это значит, что некоторые линии будут иметь много имен. Например крайняя левая линия из примера ниже (шаблон страницы) будет иметь сразу три имени: header-start , main-start и footer-start .
Такая же логика работает и наоборот, если линиям указать имена дом-start и дом-end , то все что находится межу этими линиями превращается в область (ячейку) с именем дом .
grid-template-areas: также можно указывать в первом значении свойств:
Примеры:
Шаблон страницы. Создадим сетку с четырьмя колонками и тремя рядами. Весь верхний ряд будет шапкой (header), средний ряд будет контентом (main) и сайдбаром (sidebar), между которыми оставим место (.). И последний рад будет подвалом (footer).
Размеры и области можно указывать одновременно:
Позволяет разом указать три свойства: grid-template-rows , grid-template-columns и grid-template-areas .
Примеры:
В первом параметре (в рядах) можно указать шаблон (области). 25px — это высота ряда.
За что отвечает алгоритм dense html css
CSS Grid — схема расположения блоков на странице, пришедшая на смену, или даже в помощь Flex-box схеме.
Свойства родительского контейнера
display
Задает контейнеру значение grid или inline-grid, после чего все ближайшие потомки блока начинают подчиняться правилам grid элементов.
- grid — блочный элемент
- inline-grid — строчный элемент
Для дочерних элементов grid контейнера перестают работать такие свойства как: float, display: inline-block, display: table-cell, vertical-align и column-*.
grid-template-columns / grid-template-rows
Параметры определяют строки и колонки, которые будут находиться внутри контейнера.
- <track-size> — может быть длиной, процентом или долей свободного места в сетке (единица fr). При необходимости повторения используется repeat().
- <line-name> — любое название, указанное вами.
Как это работает
Когда вы оставляете не заполненным параметр имени, т.е. указываете только размеры, линиям сетки автоматически назначаются положительные и отрицательные номера:
100px 150px auto 150px 100px [1] [-4] 25% [2] [-3] 100px [3] [-2] auto [4] [-1] [1 | -6] [2 | -5] [3 | -4] [4 | -3] [5 | -2] [6 | -1] Но, линиям можно присвоить определенные имена, указав их в параметре:
100px 150px auto 150px 100px [row1-start] 25% [row1-end] 100px [third-line] auto [last-line] [first] [line2] [line3] [col4-start] [five] [end] Линиям можно присвоить более чем 1 имя. Запись нескольких имен для линии, row1-end и row2-start:
Если надо обозначить идентичные части, можно воспользоваться параметром repeat(). Первая цифра обозначает количество повторений, дальше следует конструкция которую надо повторить, до и после объявления можно указывать другие элементы итогового значения:
Если несколько строк имеют одинаковые имена, на конкретную строку можно сослаться указав имя и порядковый номер:
Размер может быть долей, при использовании единицы fr. Например, так каждая ячейка таблицы будет занимать треть от размера контейнера:
Свободное пространство для распределения на доли вычисляется после того как оттуда вычитаются остальные статичные размеры:
grid-template-areas
Свойство задает шаблон сетки, который определяется свойством grid-area.
- <grid-area-name> — название области сетки, указанной в grid-area.
- . — обозначает пустую ячейку сетки.
- none — область сетки не определена.
Как это работает
Допустим, необходимо создать типичный шаблон, с шапкой и подвалом во всю ширину, а в центральной части расположить 1 широкий, 1 узкий и 1 пустой фрагмент пространства:
grid-auto-flow
The grid-auto-flow CSS property is part of the CSS Grid Layout specification that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties.
That example creates a grid container that can hold eight items in each row and fills any remaining available space with smaller items that come later and can fit the space.
Demonstrating the effect of grid-auto-flow: dense in a grid layout.- Initial value: row
- Applies to: grid containers
- Inherited: no
- Computed value: as specified
- Animation type: discrete
This is the default value. Once specified, items will be laid out in a horizontal direction. Grid’s auto-placement algorithm will place grid items by filling each row and will only create new rows if needed.
This example shows that the grid items are placed next to each other in a row and once there is no room in the current row, grid adds new rows automatically in order to place the rest of the grid items.
The auto-placement algorithm’s default behavior places grid items by filling each row and creating new rows if needed.Grid items will be laid out vertically by column. The auto-placement algorithm will place grid items by filling each column and create additional columns if needed.
As you see in the following image, in this example, grid places the items in columns and once there is no cell left, it automatically moves on to the new column until there are no more grid items.
Setting the grid-auto-flow property to column makes the auto-placement algorithm to places grid items by filling each column and create new columns if necessary.In the above example, there were three rows explicitly defined by grid-template-rows . Now let’s see another example with no rows specified and grid-auto-flow being set to column :
Here we only defined five columns but since we set auto-placement to column , it generates additional columns in order to place the rest of the grid items, which may cause an overflow.
Demonstrating how grid-auto-flow: column puts items next to each other. No additional rows are specified, which causes the grid to overflow its container.Note that those additional columns are called implicit columns and we can control their size using the grid-auto-columns property.
If specified, the auto-placement algorithm attempts to fill available space in the grid with smaller items, even if they are out of order in the markup.
To understand better the dense keyword value, let’s establish an 8×8 grid of 50px squares as an example:
Then we expand the size of some of them:
You can see the result in the following image:
The grid has the default value of auto-placement which has caused some holes to appear among grid items.
As you can see, by default, grid lays out items in the same order as they are in the HTML order. And when it comes to a space where it can’t fit an item, it skips that space, leaving “holes” in our layout.
The dense keyword changes this behavior by allowing the grid to ignore the HTML in a way that, when it finds an item that fits a hole, it will take the item — regardless of whether it’s next in the HTML or not — and places it into that hole.
The dense keyword makes auto-placement algorithm to reorder items in order to back-fill holes in the layout.Take a look at the sixth grid item, now it moved in order to fill the first hole that it can fit in.
So by default, grid progresses forward and never looks back to check if it can fit an item in previous empty spaces. But when we declare dense , the algorithm attempts to fill as many holes as it can, regardless of the source order.
Since row is the default value, using row dense is the same as using dense and it has the same effect.
Grid items will be laid out by column while filling holes.
If we change the value of grid-auto-flow property to column dense in the previous example, we will have the following result:
One thing to note when using the grid-auto-flow property is the issue caused by dense algorithm.
The dense keyword only changes the visual order of the grid items and that order might not be the same as the original document order which may cause a very bad experience for someone tabbing through the document on a keyboard or listening to a screen reader that’s reads content in the same order as the HTML.
So, avoid using the dense keyword values when the HTML order of the elements matters. For example, it can be good for a random image gallery but perhaps not so much for your form inputs.
However, at the time of this writing, there is a proposal to tackle this issue that will hopefully resolve this concern in the future.
Creating a gallery with CSS Grid has become very enjoyable and you can add grid-auto-flow to make it more awesome:
You can change the value of the grid-auto-flow property to see its effect on the gallery:
Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал
Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.
В конце статьи вас ждет небольшой туториал по созданию тренажера по 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
Данное свойство определяет флекс-контейнер; блочный или строчный в зависимости от присвоенного значения. Оно включает «флекс-контекст» для всех прямых потомков контейнера.
Обратите внимание, что свойства CSS-колонок в контейнере не работают.
flex-direction (направление)
Данное свойство определяет основную ось, направление, по которому размещаются элементы в контейнере. Флекс сам по себе (без расширяющих его функционал оберток) реализует концепцию однонаправленного макета. Поэтому элементы размещаются либо в горизональных строках, либо в вертикальных колонках.
- row (по умолчанию): элементы располагаются слева направо в ltr или справа налево в rtl
- row-reverse: обратный row порядок расположения элементов — справа налево в ltr или слева направо в rtl
- column: аналогично row, но сверху вниз
- column-reverse: аналогично row-reverse, но снизу вверх
flex-wrap (перенос, переход, разделение)
По умолчанию, все элементы помещаются в одну строку. С помощью данного свойства можно позволить элементам перемещаться на следующую строку при необходимости.
- nowrap (по умолчанию): все элементы располагаются на одной строке
- wrap: элементы могут располагаться на нескольких строках сверху вниз
- wrap-reverse: элементы могут располагаться на нескольких строках снизу вверх
flex-flow (поток)
Данное свойство является сокращением для flex-direction и flex-wrap, которые определяют основную и поперечную оси контейнера. Значением по умолчанию является row nowrap.
justify-content (выравнивание контента в одной строке)
Данное свойство определяет выравнивание элементов вдоль основной оси. Оно позволяет распределять свободное пространство, оставшееся неиспользованным элементами с фиксированным размером или гибкими элементами, достигшими максимального размера. Оно также позволяет управлять выравниванием при переполнении строки элементами.
- 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 применительно к поперечной оси (перпендикулярной основной).
- 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 не будет иметь никакого эффекта.
- 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 (порядок)
По умолчанию, элементы располагаются в контейнере в том порядке, в котором указаны в разметке. Данное свойство позволяет этим управлять.
flex-grow (рост, расширение)
Данное свойство определяет способность элемента к расширению при необходимости. Оно принимает целочисленное значение, которое выступает в качестве пропорции. Пропорция определяет, какое количество доступного пространства в контейнере может занимать элемент.
Если все элементы имеют свойство «flex-grow» со значением 1, доступное пространство будет между ними распределяться равномерно. Если значением flex-grow одного из элементов является 2, данный элемент будет занимать двойную порцию пространства по сравнению с остальными элементами (или, по крайней мере, попытается это сделать).
Отрицательные значения невалидны.
flex-shrink (сжатие, сокращение)
Данное свойство определяет способность элемента к сжатию при необходимости.
Отрицательные значения невалидны.
flex-basis
Данное свойство определяет стандартный размер элемента перед распределением оставшегося пространства. Этим размером может быть длина (например, 20%, 5rem и т.д.) или ключевое слово. Ключевое слово «auto» означает использование значения свойства «width» или «height» элемента (раньше вместо auto использовалось main-size). Ключевое слово «content» означает учет содержимого элемента. Указанное ключевое слово пока плохо поддерживается, поэтому сложно определить разницу между min-content, max-content и fit-content.
Если значением этого свойства является 0, окружающее элемента пространство не принимается в расчет. Если значением является «auto», доступное пространство распределяется согласно значению свойства «flex-grow».
Данное свойство является сокращением для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) являются опциональными. Значением по умолчанию является 0 1 auto, при этом auto можно опустить.
Рекомендуется использовать данное сокращение вместо определения каждого свойства, это позволяет автоматически определять значения свойств в правильном порядке.
align-self(выравнивание отдельного элемента)
Данное свойство позволяет перезаписывать дефолтное или установленное с помощью align-self выравнивание отдельного элемента.
См. объяснение align-items для доступных значений.
Обратите внимание, что float, clear и vertical-align применительно к флекс-элементу не имеют никакого эффекта.
Примеры
Начнем с очень простого примера — решения проблемы выравнивания элемента по центру.
Это работает благодарю тому, что свойство «margin» со значением «auto» поглащает все доступное пространство флекс-контейнера. Поэтому установка значения вертикальных внешних отступов в auto приводит к идеальному центрированию элемента по обеим осям.
Теперь попробуем использовать больше свойств. У нас имеется 6 элементов фиксированного размера, способных перестраиваться в зависимости от ширины экрана без участия медиа-запросов. Мы хотим, чтобы доступное пространство основной оси распределялось между элементами равномерно.
Готово. Осталось немного стилизовать:
Попробуем что-нибудь еще. Предположим, что в шапке сайта у нас имеется навигационное меню, выровненное по правому краю, и мы хотим, чтобы оно распологалось по центру на средних экранах и выстраивалось в одну колонку на маленьких экранах. Проще простого.
Поэкпериментируем с гибкостью элементов. Как насчет создания mobile-first трехколоночного макета с полноразмерной шапкой и подвалом, который не зависит от порядка расположения элементов в разметке.
Полезные ресурсы
Поддержка
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.
Пример
Колонки с гибкой шириной, которые автоматически перестраиваются в зависимости от ширины экрана без медиа-запросов.
Свойства грид-контейнера
display
Данное свойство делает элемент грид-контейнером и устанавливает грид-контекст для его содержимого.
- grid — блочная Сетка
- inline-grid — строчная Сетка
grid-template-columns, grid-template-rows
Данные свойства определяют колонки и строки Сетки с разделенными пробелами значениями. Значения представляют собой размер трека, а пробелы — линию.
- <track-size> — длина, проценты или фракции свободного пространства Грида (используется единица измерения «fr»)
- <line-name> — произвольное название
Вы можете явно указывать названия линий. Обратите внимание на квадратные скобки:
Линии могут иметь несколько названий. Здесь, например, вторая линия имеет два названия:
Если определение содержит повторяющиеся фрагменты, можно использовать инструкцию «repeat» для сокращения:
Что эквивалентно следующему:
Если несколько линий имеют одинаковые имена, можно использовать название линии и количество таких линий.
Единица «fr» позволяет установить размер трека как фракцию свободного пространства контейнера. В примере ниже ширина каждого элемента равняется трети ширины контейнера:
Свободное пространство вычисляется после вычитания элементов фиксированного размера. В следующем примере пространство, доступное для распределения с помощью единицы «fr» не включает 50px:
grid-template-areas
Данное свойство определяет шаблон Сетки с помощью названий областей, определенных в свойствах «grid-area». Повторение названий областей заставляет контент расширяться на указанное количество ячеек. Точка означает пустую ячейку. Такой синтаксис позволяет визуализировать структуру Сетки.
- <grid-area-name> — название области
- . — пустая ячейка
- none — область отсутствует
Этот код создает Сетку шириной в четыре колонки и высотой в три строки. Первая (верхняя) строка полностью занимается шапкой. Средняя строка состоит из двух областей «main», одной пустой ячейки и одной области «sidebar». Последняя строка — подвал.
Каждая строка в определении должна состоять из одинакового количества колонок.
Для обозначения пустой ячейки можно использовать любое количество точек. До тех пор, пока между точками нет пробела, они являются индикатором пустой ячейки.
Обратите внимание, что данный синтаксис применяется для обозначения областей, а не линий. При использовании этого синтаксиса линия каждой стороны области именуется автоматически. Если названием области является «foo», то названием начальных (первых) линий (строчной и колоночной) области будет «foo-start», а последних — «foo-end». Это означает, что некоторые линии могут иметь несколько названий, как в рассмотренном примере, где верхняя левая линия имеет три названия: header-start, main-start и footer-start.
grid-template
Данное свойство является сокращением для grid-template-rows, grid-template-columns и grid-template-areas.
- none — сбрасывает значения всех трех свойств до дефолтных
- <grid-template-rows> / <grid-template-columns> — устанавливает свойствам «grid-template-rows» и «grid-template-columns» соответствующие значения, а свойству «grid-template-areas» значение «none»
Это эквивалентно следующему:
Поскольку grid-template не сбрасывает неявные свойства Сетки (такие как grid-auto-columns, grid-auto-rows и grid-auto-flow), что требуется в большинстве случаев, вместо него рекомендуется использовать свойство «grid».
column-gap, row-gap, grid-column-gap, grid-row-gap
Данные свойства определяют размеры линий. Другими словами, они определяют величину отступов между колонками/строками.
- <line-size> — величина отступов
Отступы создаются только между колонками/строками, но не по краям Сетки.
Обратите внимание, что свойства «grid-column-gap» и «grid-row-gap» в настоящее время переименованы в «column-gap» и «row-gap».
gap, grid-gap
Данное свойство является сокращением для row-gap и column-gap.
- <grid-row-gap> <grid-column-gap> — размеры отступов
Если значение свойства «row-gap» не установлено, оно принимает значение свойства «column-gap».
Обратите внимание, что свойство «grid-gap» в настоящее время переименовано в «gap».
justify-items
Данное свойство определяет выравнивание элементов в ячейках вдоль строчной (горизонтально) оси (в противоположность своству «align-items», определяющему выравнивание вдоль блочной (колоночной, вертикальной) оси). Значение этого свойства применяется ко всем элементам контейнера.
- start — элементы сдвигаются в начало их ячеек (левая граница)
- end — элементы сдвигаются в конец ячеек (правая граница)
- center — элементы распологатся по центру
- stretch — элементы заполняют всю ширину ячеек
Расположение отдельного элемента вдоль строчной оси ячейки контролируется свойством «justify-self».
align-items
Данное свойство определяет выравнивание элементов в ячейках вдоль блочной (колоночной, вертикальной) оси (в противоположность свойству «justify-items», которое определяет выравнивание вдоль строчной (горизонтальной) оси). Значение этого свойства применяется ко всем элементам контейнера.
- start — элементы сдвигаются в начало их ячеек (верхняя граница)
- end — элементы сдвигаются в конеч ячеек (нижняя граница)
- center — элементы располагаются по центру
- stretch — элементы заполняют всю высоту ячеек
Расположение отдельного элемента вдоль колоночной оси ячейки контролируется свойством «align-self».
place-items
Данное свойство является сокращением для align-items и justify-items.
- <align-items> <justify-items> — первое значение для align-items, второе — для justify-items. Если второе значение отсутствует, первое значение присваивается обоим свойствам.
Элементы располагаются по центру ячеек вдоль колоночной оси и в начале вдоль строчной оси.
justify-content (выравнивание колонок)
Порой общая ширина элементов Сетки (ее колонок) оказывается меньше ширины контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения колонок Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок (в противоположность свойству «align-content», которое определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк).
- start — сдвигает Сетку в начало контейнера (левая граница)
- end — сдвигает Сетку в конец контейнера (правая граница)
- center — Сетка располагается по центру
- stretch — колонки растягиваются таким образом, чтобы Сетка занимала всю ширину контейнера
- space-around — одинаковое пространство между колонками, и половина такого пространства по краям контейнера
- space-between — первая колонка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными колонками
- space-evenly — одинаковое пространство как между колонками, так и по краям контейнера
align-content (выравнивание строк)
Порой общая высота элементов Сетки (ее строк) оказывается меньше высоты контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения строк Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк (в противоположность свойству «justify-content», которое определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок).
- start — сдвигает Сетку в начало контейнера (верхняя граница)
- end — сдвигает Сетку в конец контейнера (нижняя граница)
- center — Сетка располагается по центру
- stretch — строки растягиваются таким образом, чтобы Сетка занимала всю высоту контейнера
- space-around — одинаковое пространство между строками, и половина такого пространства по краям контейнера
- space-between — первая строка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными строками
- space-evenly — одинаковое пространство как между строками, так и по краям контейнера
place-content
Данное свойство является сокращением для align-content и justify-content.
- <align-content> <justify-content> — первое значение для align-content, второе — для justify-content. Если второе значение отсутствует, первое значение присваивается обоим свойствам.
Строки располагаются по центру контейнера, колонки — в начале.
grid-auto-columns, grid-auto-rows (размер неявных треков)
Данные свойства определяют размер автоматически создаваемых дорожек (неявных треков). Неявные треки создаются при наличии большего количества элементов, чем ячеек Сетки, или при размещении элемента за пределами Сетки.
- <track-size> — длина, проценты или фракции свободного пространства Сетки (используется единица измерения «fr»)
Это создает Сетку размером 2х2.
Допустим, мы используем свойства «grid-column» и «grid-row» для позиционирования элементов следующим образом:
Началом элемента с классом «item-b» является вертикальная линия 5, а концом — вертикальная линия 6, но мы не определили эти линии. Поскольку мы ссылаемся на несуществующие линии, для заполнения отступов создаются неявные треки с нулевой шириной. Мы можем использовать свойство «grid-auto-columns» для определения ширины неявных дорожек:
grid-auto-flow
Для позиционирования элементов, находящихся за пределами Сетки, можно использовать алгоритм автоматического размещения (auto-placement algorithm). Рассматриваемое свойство определяет, как должен работать данный алгоритм.
- row (по умолчанию) — алгоритм заполняет текущую строку до предела и, при необходимости, когда ширины текущей строки оказалось недостаточно, создает новую строку
- column — алгоритм заполняет текущую колонку до предела и, при необходимости, когда высоты текущей колонки оказалось недостаточно, создает новую колонку
- dense — интеллектуальное заполнение Сетки при наличии элементов разного размера
Предположим, что у нас имеется такая разметка:
Мы определяем Сетку, состоящую из пяти колонок и двух строк, и устанавливаем свойству «grid-auto-flow» значение «row» (которое является значением по умолчанию):
При размещении элементов в Сетке, мы определяем места только двух элементов:
Поскольку значением свойства «grid-auto-flow» является «row», наша Сетка выглядит так, как показано на изображении ниже. Обратите внимание на расположение элементов с классами «item-b», «item-c» и «item-d» (предпочтение отдается строкам):
Если поменять значение свойства «grid-auto-flow» на «column», Сетка будет выглядеть следующим образом (предпочтение отдается колонкам):
Данное свойство является сокращением для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (обратите внимание, что в одном объявлении могут содержаться только «явные» или «неявные» свойства).
- none — все свойства принимают значения по умолчанию
- <grid-template> — аналогично сокращению grid-template
- <grid-template-rows> / [auto-flow && dense?] <grid-auto-columns>? — определяет значение для grid-template-rows. Если справа от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «column». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-columns» опущено, его значением становится «auto»
- [auto-flow && dense?] <grid-auto-rows>? / <grid-template-columns> — определяет значение для grid-template-columns. Если слева от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «row». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-rows» опущено, его значением становится «auto»
Следующие два блока кода эквиваленты:
Следующие два блока кода эквиваленты:
И следующие два блока кода также эквиваленты:
В данном случае мы можем использовать более сложный, но в тоже время более удобный синтаксис для одновременного определения свойств «grid-template-areas», «grid-template-rows» и «grid-template-columns» и установки прочих свойств в дефолтные значения. Что для этого нужно сделать, так это определить названия линий и размеры треков с соответствующими областями на одной строке. Это проще продемонстрировать на примере:
Это равнозначно следующему:
Свойства грид-элементов
Обратите внимание, что свойства 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 — конечные.
- <line> — может быть числом (привязка осуществляется к номеру линии) или названием (привязка осществляется к названию линии)
- span <number> — элемент будет растянут на указанное количество треков
- span <name> — элемент будет растягиваться до достижения линии с указанным названием
- auto — автоматическое расположение, автоматическое расширение или дефолтное растягивание на одну колонку
Если значения свойств 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, соответственно.
- <start-line> / <end-line> — значения аналогичны значениям оригинальных свойств, включая span
Если конечная линия не определена, элемент по умолчанию будет занимать 1 трек.
grid-area
Данное свойство определяет название элемента, которое используется в качестве значения в свойстве grid-template-areas. grid-area также может использоваться как сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end.
- <name> — произвольное название элемента
- <row-start> / <column-start> / <row-end> / <column-end> — могут быть числами или названиями линий
Сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end:
justify-self
Данное свойство определяет выравнивание элемента в ячейке вдоль строчной оси (в противоположность свойству align-self, которое определяет выравнивание вдоль блочной (колоночной) оси). Это свойство применяется к элементу внутри отдельной ячейки.
- start — элемент сдвигается в начало ячейки (левая граница)
- end — элемент сдвигается в конец ячейки (правая граница)
- center — элемент располагается по центру
- stretch — элемент заполняет всю ширину ячейки
Для управления выравниванием всех элементов Сетки вдоль строчной оси используется свойство justify-items.
align-self
Данное свойство определяет выравнивание элемента в ячейке вдоль блочной (колоночной) оси (в противоположность свойству justify-self, которое определяет выравнивание вдоль строчной оси). Это свойство применяется к элементу внутри отдельной ячейки.
- start — элемент сдвигается в начало ячейки (верхняя граница)
- end — элемент сдвигается в конец ячейки (нижняя граница)
- center — элемент располагается по центру
- stretch — элемент заполняет всю высоту ячейки
Для управления выравниванием всех элементов Сетки вдоль блочной (колоночной) оси используется свойство align-items.
place-self
Данное свойство является сокращением для align-self и justify-self.
- auto — значение по умолчанию
- <align-self> / <justify-self> — первое значение для align-self, второе — для justify-self. Если второе значение опущено, первое значение применяется к обоим свойствам
Специальные функции и ключевые слова
- При определении размеров строк и колонок можно использовать не только обычные единицы измерения, такие как 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)) (из примера в начале раздела про Грид)
Полезные ресурсы
Поддержка
Туториал
В данном туториале мы создадим простой тренажер по основным свойствам Flexbox.
Разметка
Здесь у нас имеется флекс-контейнер (flexContainer) с шестью флекс-элементами (flex-item) и контейнер (controls) для управления переключением свойств флекс-контейнера (flexContainerProps) и выбранного (selected) флекс-элемента (flexItemProps). Также во втором контейнере у есть две кнопки (buttons): одна для добавление элемента во флекс-контейнер (addBtn), другая для удаления последнего флекс-элемента (removeBtn).
Стили
Флекс-элементы должны быть разного размера и при этом гибкими. Мы добиваемся этого с помощью min-width/min-height и nth-child. Выбранный элемент имеет класс «selected» с другим цветом фона.
Скрипт
Как видите, ничего сложного. Конечно, функционал получившегося тренажера весьма ограничен. Однако, полагаю, этого вполне достаточно для понимания работы основных свойств Flexbox.
Рекомендую попробовать создать аналогичный тренажер по основным свойствам Grid — это будет отличной практикой и позволит как следует во всем разобраться.
Вам также может показаться интересным один из моих последних проектов — Современный стартовый HTML-шаблон.
Золотая рыбка CSS3 Grid Layout (часть 3)
Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)
Кстати, так совпало, что параллельно с нами Эмиль Бьёрклунд также ведёт свою серию статей, посвящённую спецификации Grid Layout. Поэтому, чтобы лучше прояснить для себя механизм этой раскладки, мы настоятельно рекомендуем ознакомиться со статьями Эмиля. Для этого можно пройти к нему в гости, либо прочитать перевод у нас на сайте.
Повторение колонок и рядов с функцией repeat()
Вы наверняка знаете свойство background-repeat , которое отвечает за повторение фоновой картинки в элементе. Вот и в модуле Grid Layout есть нечто похожее, но только для повторения колонок/рядов.
Представляю вам функцию repeat() , при помощи которой можно создать повторяющийся паттерн для построения колонок/рядов, описанный в компактной форме.
Например, возьмём CSS-код из спецификации:
Обратите внимание на повторяющиеся названия именованных линий, которые находятся в разных скобках. Как вы поняли, так тоже можно делать. Чуть позже в этой статье мы разберём примеры того, где это может пригодится, а пока вернёмся к repeat() .
При помощи repeat() то же самое CSS-объявление выглядит так:
Намного короче, неправда ли? Но давайте разберёмся. Я не стану приводить скриншоты, поскольку здесь достаточно простого объяснения, как работает эта функция. Первый аргумент в repeat() , это число повторений паттерна. В нашем случае паттерн будет повторяться 4 раза. Далее мы уже описываем сам паттерн: величину колонок, именованные линии и т.д. Всё просто. Очевидно, что эта функция очень полезна при большом количестве ячеек. И также не забывайте, что repeat() легко можно использовать и для построения рядов в свойстве grid-template-rows.
Обращение к полосам
По умолчанию грид-элементы распределяются по сетке в обычном порядке, как они идут в разметке. Но что если нам нужно раскидать блоки по конкретным колонкам/рядам? Grid Layout позаботился и об этом, предоставив пару способов. Рассмотрим каждый из них.
Способ с уникальными названиями грид-линий
Ранее (в этой и предыдущих статьях) мы уже научились создавать сетки разными методами, например, при помощи уникальных названий грид-линий. Поэтому в ниже представленной разметке и стилях вы не увидите ничего эдакого.
Мы воспользовались свойством grid-template-columns , чтобы создать сетку, состоящую из девяти колонок (четыре широких по 100px в ширину и пять узких по 10px). Нечто подобное мы проделывали здесь, только в нашем случае ширина первой колонки (а значит расстояние между началом первой и второй линией) будет 10px, второй (между [col1-start] и [col1-end]) — 100px, третьей — 10px и т.д.
В нашем грид-контейнере находится шесть грид-элементов. Представим, что нам нужно поместить в первую, третью и четвёртую широкие колонки по два блока, а вторую широкую колонку (и соответственно остальные узкие по 10px) пропустить. Для этого нам нужен такой CSS:
Я специально сделал границу, чтобы было видно пустые колонки (ячейки грида). Элементы находятся во второй, в шестой и в восьмой колонках, а остальные колонки пустуют. Как вы, возможно, догадались из CSS-кода, произошло это потому, что с помощью свойства grid-column мы обратились к нужным нам колонкам по уникальными именам их границ ( [col1-start] , [col3-start] , [col4-start] ), приказав, например, первому и четвёртому элементам ( div:nth-child(3n + 1) ) оказаться в колонке, начинающейся от линии col1-start .
Способ с одинаковыми названиями грид-линий
Только что благодаря уникальным именам грид-линий мы легко раскидали элементы по нужным колонкам. Но что делать, если названия грид-линий не уникальны? Но и в этом случае Grid Layout нас не подвёл!
В HTML поменяем только класс у грид-контейнера.
А в CSS уберём цифры из названий линий, сделав их одинаковыми:
Мы заменили все col*-start на просто col-start , проделав тоже самое и с col*-end . И теперь при этом нам нужно получить такой же результат, что и в предыдущем примере. Как это сделать? Да легко. Мы просто обратимся к грид-линиям по номерам:
И вот результат. Знакомый, не правда ли?
Это напоминает массив, только номера начинаются с цифры 1, а не с цифры 0, как мы привыкли. В свойстве grid-template-columns четыре линии col-start , следовательно к первой можно обратиться col-start 1 , ко второй col-start 2 , и т.д. Понятно, что, например, col-start 1 будет равнозначна col1-start из предыдущего примера. Поэтому, чтобы заставить первый и четвёртый элементы ( div:nth-child(3n + 1) ) занять вторую колонку, мы просто присвоили их свойству grid-column значение col-start с номером 1 .
Автоматическое размещение
Согласно автоматическому алгоритму размещения Grid Layout, грид-элементы выкладываются по сетке в грид-контейнере друг за другом, заполняя собой свободное пространство. Если, например, грид-элементу не хватает места в первом ряду, то он автоматически переходит на второй ряд. Вся прелесть здесь в том, что Grid Layout позволяет нам взять алгоритм автозразмещения под свой контроль! Это напоминает свойство flex-direction в Flexbox, только круче и в контексте Grid Layout.
Давайте рассмотрим это сразу на примерах, начав с простых и закончив более сложным из спецификации.
Для начала воспользуемся уже знакомыми нам свойствами grid-template-columns и grid-template-rows и создадим грид-сетку 3х3, где колонки будут занимать по 200px, а ряды — по 100px. Элементов при этом будет семь, поскольку так нагляднее для понимания алгоритма.
Здесь всё вроде бы ясно, поэтому пора познакомиться с новым свойством grid-auto-flow , которое как раз и отвечает за алгоритм размещения грид-элементов по сетке. У этого свойства есть два значения: row , column , плюс к каждому из них может добавляться ещё одно волшебное значение dense. Последнее ( dense ) мы обсудим чуть позже, а пока посмотрим, как ведёт себя алгоритм без него. Первое значение rows (значение по умолчанию) приказывает элементам выстраиваться слева направо, идя по рядам, заполняя каждую грид-ячейку. Такое поведение можно наблюдать на рисунке выше.
А сейчас давайте поменяем значение свойства grid-auto-flow с row на column .
Не трудно догадаться, что произошло. Теперь грид-элементы выстраиваются не слева направо, а сверху вниз, следуя уже не по рядам, а по колонкам.
А теперь перейдём к
самому страшномуболее сложному примеру из спецификации, чтобы увидеть всю прелесть значения dense .Представим, что у нас есть форма с полями, метками и отдельным блоком (на место расположение которого, кстати, стоит обратить особое внимание, см. блок #department-block ) с выпадающим списком внутри, ну и блок с кнопками.
Наша задача раскидать метки, поля и отдельный блок по своим колонкам (всего три колонки), а блоку с кнопками отвести отдельный ряд в самом низу.
Я немного упростил пример и переделал картинку из спецификации, чтобы было наглядно понятно, что происходит
Для начала давайте разберёмся, что вообще происходит. В этом примере собрано множество грид-механизмов, с которыми мы уже знакомы. Например, взять вот это объявление:
Мы уже проделывали подобный трюк в этой статье (см. раздел «Способ с уникальными названиями грид-линий»), где давали уникальные названия грид-линиям, чтобы потом разбросать нужные элементы по «именованным колонкам». Единственное отличие здесь в том, что расстояние между линиями (колонками) не фиксированное (auto), поэтому ширина колонок определяется шириной элементов.
Дальше у нас идут такие блоки объявлений:
Свойство grid-column нам также знакомо, поэтому вы уже наверное догадались, что для меток (label) у нас отведена первая колонка, для полей — вторая, а для блока #department-block — третья.
Здесь стоит отметить несколько важных моментов. У свойства grid-row меток и полей стоит значение auto , поэтому ряды будут заполняться по мере необходимости. С этим всё понятно, но о чём нам говорит значение span 3 у свойства grid-row блока #department-block ? О том, что блок #department-block будет занимать три ряда (span 3).
А вот в каком ряду будет располагаться #department-block , нам расскажет наше загадочное значение dense .
Без dense алгоритм может «переть» только вперед, не оглядываясь назад. Поскольку метки и поля могут находиться только в своих выделенных колонках, то при их размещении алгоритм вынужден опускаться всё ниже и ниже. Когда он доходит до блока #department-block , алгоритм находится на 6 ряду — столько перед ним было меток и полей — и этот блок продолжает этот же 6 ряд.
А вот теперь мы подошли к самому главному — к dense — третьему значению свойства grid-auto-flow . Давайте посмотрим, что может сотворить эта мощная штука.
Как видно на рисунке, блоку #department-block больше не приходится опускаться вниз и ждать своей очереди, чтобы занять свой ряд. Благодаря dense алгоритм теперь учитывает пропущенные строки и размещает #department-block сразу же в первой строке его ряда.