Как выровнять блочный элемент по центру css

Центрирование элементов в CSS

Центрирование элементов в css — это совсем не праздный вопрос, т.к. это довольно распространенная ситуация в верстке. В этой статье мы рассмотрим разные способы горизонтального и вертикального центрирования элементов на странице.

Устаревшие варианты центрирования

На всякий случай хочу напомнить, что такой популярный тег, как , который в далекие времена HTML4 выравнивал по центру содержимое блочного элемента, давно считается устаревшим и вызовет ошибку при валидации вашей страницы. Также в HTML4 был популярен атрибут align=»center» , с которым ситуация аналогична.

Выравнивание по горизонтальному центру строчных (inline) и строчно-блочных (inline-block) элементов

Как известно, у нас есть простые способы центрировать контент по горизонтали. Для этого мы используем text-align: center для абзаца, div-а, заголовка, т.е. любого блочного элемента, внутри которого размещен текст или картинка, — и все работает. Например, код для изображения ниже будет таким:

Изображение внутри абзаца с text-align:center

Центрированное изображение

Аналогично будет центрирован любой элемент, для которого свойство display задано, как inline или inline-block .

Выравнивание по горизонтальному центру блочных (block) элементов с помощью margin: auto

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

max — width : 1200px ;
padding — left : 15px ;
padding — right : 15px ;
margin : auto ;

Вариации кода могут быть разными, но принцип понятен, я думаю. Можно разместить простую форму посередине ее родительского элемента. Поскольку тег относится к блочным, то margin: auto сработает для него в качестве центрирующего правила при заданной ширине (свойство width ):

Центрируем форму за счет margin: auto
#center-form < width : 350px ; height : 200px ; padding : 20px ; border : 3px double #1e8cbe ; border-radius : 12px ; margin : 20px auto ;

Смотрим на результат:

Свойство margin: auto или margin: 20px auto , как в стилях для формы, или 2 свойства: margin-left: auto + margin-right: auto , заданные для блочного элемента с определенной шириной, сообщают браузеру, что тот должен самостоятельно рассчитать отступы слева и справа таким образом, чтобы они были одинаковыми. Браузеру сделать это несложно, т.к. ему всегда известна ширина открытого на данный момент окна, поэтому вычесть из нее ширину блочного элемента и разделить полученное значение на 2 для браузера пара пустяков.

Используем свойства position: absolute и transform: translate

Для абсолютно позиционированных элементов характерно особое поведение — они «вырываются» из своего родительского контейнера, «схлопывая» его высоту в 0, если явно не задано значение таких свойств, как height или min-height или размеры родителя не включают padding . Кроме того, такие элементы имеют ширину, равную их контенту, если она не задана явно, поэтому бывает сложно ее рассчитать.

Для горизонтального центрирования абсолютно позиционированного элемента сначала нужно задать свойства для его родителя: position: relative и min-height . А для центрируемого элемента, помимо различных «оформительских» свойств (цвета фона, рамки, размера текста, внутренних отступов и т.д.) обязательно нужно указать position: absolute; left: 50%; и transform: translate(-50%) . В этом случае можно не задавать ширину или высоту элемента — она будет рассчитана на основе остальных свойств и содержимого. Однако никто не мешает сделать это явно, использовав свойства width и height .

Гайд по grid

Полный список свойств для создания раскладки на гридах и управления ею.

Время чтения: больше 15 мин

Открыть/закрыть навигацию по статье

Что такое гриды?
Основные термины
Свойства грид-контейнера
1. display
2. grid-template-columns, grid-template-rows
3. auto-fill и auto-fit
4. grid-auto-columns, grid-auto-rows
5. grid-auto-flow
6. grid-template-areas
7. grid-template
8. row-gap, column-gap
9. gap
10. justify-content
11. justify-items
12. align-items
13. place-items
14. grid
1. grid-column-start, grid-column-end, grid-row-start, grid-row-end
2. grid-column, grid-row
3. grid-area
4. justify-self
5. align-self
6. place-self
1. Балдин Кирилл советует
2. Алёна Батицкая советует
1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?
Контрибьюторы:
- Артём Гусев ,
- Алексей Филимонов ,
- Антон Капустинский
Обновлено 25 октября 2023

Что такое гриды?

Скопировать ссылку «Что такое гриды?» Скопировано

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

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

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

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

Основные термины

Скопировать ссылку «Основные термины» Скопировано

Грид-контейнер: родительский элемент, к которому применяется свойство display : grid .

Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.

Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.

Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.

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

Скопировать ссылку «Свойства грид-контейнера» Скопировано

display

Скопировать ссылку «display» Скопировано
```
 .container  display: grid;> .container  display: grid; >      
```
Если элементу задано свойство display со значением grid , то такой элемент становится грид-контейнером. Дочерние элементы этого контейнера начинают подчиняться правилам грид-раскладки. Снаружи грид-контейнер ведёт себя как блок.
```
 .container  display: inline-grid;> .container  display: inline-grid; >      
```
Практически аналогичное предыдущему значению — за тем исключением, что снаружи грид-контейнер, созданный с помощью inline — grid , будет вести себя как строчный элемент.

grid — template — columns , grid — template — rows

Скопировать ссылку «grid-template-columns, grid-template-rows» Скопировано

Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.
```
 .container  display: grid; /* Будет создано 3 колонки */ grid-template-columns: 150px auto 40%; /* Будет создано 3 ряда */ grid-template-rows: 250px 10vw 15rem;> .container  display: grid; /* Будет создано 3 колонки */ grid-template-columns: 150px auto 40%; /* Будет создано 3 ряда */ grid-template-rows: 250px 10vw 15rem; >      
```
Можно явно именовать грид-линии, используя для этого квадратные скобки:
```
 .container  display: grid; grid-template-columns: [start] 250px [line2] 400px [line3] 600px [end]; grid-template-rows: [row1-start] 15rem [row1-end] 30vh [last];> .container  display: grid; grid-template-columns: [start] 250px [line2] 400px [line3] 600px [end]; grid-template-rows: [row1-start] 15rem [row1-end] 30vh [last]; >      
```
Каждая линия может иметь больше одного имени. Это чем-то похоже на классы в HTML — вы можете задать элементу больше одного класса. Тут аналогичная ситуация. Например, такой код будет совершенно валиден, у второй и третьей грид-линий колонки по два имени:
```
 .container  display: grid; grid-template-columns: [start] 140px [line2 col2-start] 250px [col2-end end]; grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];> .container  display: grid; grid-template-columns: [start] 140px [line2 col2-start] 250px [col2-end end]; grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last]; >      
```
Если нужны одинаковые колонки или ряды, то можно воспользоваться функцией repeat ( ) .

Будет создано 3 колонки по 250 пикселей:
```
 .container  display: grid; grid-template-columns: repeat(3, 250px);> .container  display: grid; grid-template-columns: repeat(3, 250px); >      
```
С появлением гридов у нас появилась и новая единица измерения: fr ��

fr (от fraction — доля, часть) отвечает за свободное пространство внутри грид-контейнера.

Например, этот код создаст три колонки, каждая из которых будет занимать 1/3 ширины родителя:
```
 .container  display: grid; grid-template-columns: repeat(3, 1fr);> .container  display: grid; grid-template-columns: repeat(3, 1fr); >      
```
Что аналогично записи:
```
 .container  display: grid; grid-template-columns: 1fr 1fr 1fr;> .container  display: grid; grid-template-columns: 1fr 1fr 1fr; >      
```
Свободное пространство рассчитывается после того, как место отдано всем фиксированным размерам. К примеру, в коде ниже сначала будет создана колонка шириной 200 пикселей, а затем свободное пространство — ширина родителя минус 200 пикселей — будет поделено между остальными колонками. Каждая будет занимать ширину (100% — 200px) / 2:
```
 .container  display: grid; grid-template-columns: 1fr 200px 1fr;> .container  display: grid; grid-template-columns: 1fr 200px 1fr; >      
```
auto — fill и auto — fit

Скопировать ссылку «auto-fill и auto-fit» Скопировано

В тех случаях, когда количество колонок или строк не известно для свойств grid — template — columns и grid — template — rows можно установить значения auto — fill или auto — fit в формате:
```
 .container  grid-template-columns: repeat(/* auto-fill или auto-fit */, /* размер колонки */);> .container  grid-template-columns: repeat(/* auto-fill или auto-fit */, /* размер колонки */); >      
```
Оба эти параметра ( auto — fill и auto — fit ) автоматически добавляют в грид-сетку из примера выше колонки. Но эти колонки ведут себя немного по-разному:
- auto — fill стремится заполнить колонками всё доступное пространство, а когда элементы заканчиваются, создаёт пустые колонки, равномерно распределяя доступную область между существующими и «виртуальными» колонками.
- auto — fit действует похожим образом, но, схлопывает пустые колонки и отдаёт больше места под заполненные.
Аналогично можно использовать для создания рядов.

grid — auto — columns , grid — auto — rows

Скопировать ссылку «grid-auto-columns, grid-auto-rows» Скопировано

Если элементов внутри грид-контейнера больше, чем может поместиться в заданные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки. При помощи свойств grid — auto — columns и grid — auto — rows можно управлять размерами этих автоматических рядов и колонок.
```
 .container  display: grid; grid-template-rows: 50px 140px; grid-auto-rows: 40px; gap: 20px;> .container  display: grid; grid-template-rows: 50px 140px; grid-auto-rows: 40px; gap: 20px; >      
```
В этом примере создаются два явных ряда размером 50 и 140 пикселей. Элементы, начиная с третьего, в эти два ряда не помещаются, и для них создаются автоматические ряды. При помощи свойства grid — auto — rows мы указываем, что автоматические ряды должны иметь размер 40 пикселей.

Можно задавать больше одного значения для автоматических колонок или рядов. Тогда паттерн размера будет повторяться до тех пор, пока не кончатся грид-элементы.
```
 .container  display: grid; grid-template-columns: 200px 500px; grid-auto-columns: 75px 100px 50px; grid-auto-flow: column; gap: 20px;> .container  display: grid; grid-template-columns: 200px 500px; grid-auto-columns: 75px 100px 50px; grid-auto-flow: column; gap: 20px; >      
```
Важно указать при помощи grid — auto — flow : column , что элементы должны вставать в колонки, чтобы элементы без контента были видны.

Как видите, автоматически создаются колонки размером 75, 100 и затем 50 пикселей. И так до тех пор, пока элементы не закончатся.

grid — auto — flow

Скопировать ссылку «grid-auto-flow» Скопировано

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid — auto — flow . По умолчанию значение у этого свойства row , лишние элементы будут выстраиваться в ряды в рамках явно заданных колонок.
- row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
- column — автоматически размещаемые элементы выстраиваются в колонки.
- dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.
Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.
```
 .container  display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px;> .item3  /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2;> .container  display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px; > .item3  /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2; >      
```
Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён в следующий ряд. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.

Добавим к значению свойства grid — auto — flow слово dense :
```
 .container  /* Автоматическое размещение в ряд */ grid-auto-flow: row dense;> .container  /* Автоматическое размещение в ряд */ grid-auto-flow: row dense; >      
```
Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.

Посмотрим пример со значением column :
```
 .container  grid-template-columns: auto auto; grid-template-rows: auto auto auto; /* Автоматическое размещение в колонку */ grid-auto-flow: column;> .item3  grid-row: span 2;> .container  grid-template-columns: auto auto; grid-template-rows: auto auto auto; /* Автоматическое размещение в колонку */ grid-auto-flow: column; > .item3  grid-row: span 2; >      
```
Видим аналогичную картину: третий элемент не поместился в последнюю ячейку первой колонки и встал во вторую колонку. Следующий за ним четвёртый элемент встал ниже во второй колонке.

Добавим dense к текущему значению:
```
 .container  /* Автоматическое размещение в ряд */ grid-auto-flow: column dense;> .container  /* Автоматическое размещение в ряд */ grid-auto-flow: column dense; >      
```
В результате четвёртый элемент занял пустую ячейку в первой колонке.

grid — template — areas

Скопировать ссылку «grid-template-areas» Скопировано

Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера. Имена областей задаются при помощи свойства grid — area . Текущее свойство grid — template — areas просто указывает, где должны располагаться эти грид-области.
- none (значение по умолчанию) — области сетки не задано имя.
- . — означает пустую ячейку.
- название — название области, может быть абсолютно любым словом или даже эмодзи! ��
Обратите внимание, что нужно называть каждую из ячеек. Например, если шапка или подвал нашего сайта будут занимать все три существующие колонки, то нужно будет трижды написать названия этих областей. Удобнее всего будет подписывать области в виде некой таблицы. Подобный способ записи чем-то похож на таблицы в Markdown:
```
 .container  display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(4, 1fr); grid-template-areas: "header header header" "content content ��" "content content ." "footer footer footer";> .item1  grid-area: header;> .item2  grid-area: content;> .item3  grid-area: ��;> .item4  grid-area: footer;> .container  display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(4, 1fr); grid-template-areas: "header header header" "content content ��" "content content ." "footer footer footer"; > .item1  grid-area: header; > .item2  grid-area: content; > .item3  grid-area: ��; > .item4  grid-area: footer; >      
```
Обратите внимание, что между строками не ставятся запятые или какие-то другие символы, имена разделяются пробелами.

Получится такая раскладка:

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

grid — template

Скопировать ссылку «grid-template» Скопировано

Свойство-шорткат для свойств grid — template — rows , grid — template — columns . Позволяет записать все значения в одну строку. Главное после этого не запутаться при чтении ��

Можно прописать все колонки и ряды сразу, разделяя их слэшем / . Сперва идут ряды, а затем колонки, не перепутайте!
```
 .container  display: grid; grid-template: repeat(4, 1fr) / repeat(3, 500px);> .container  display: grid; grid-template: repeat(4, 1fr) / repeat(3, 500px); >      
```
В этом же свойстве можно задавать значение и для свойства grid — template — areas , но тогда код превращается в кашу и становится совершенно нечитабельным. Лучше всё же использовать это свойство отдельно:
```
 .container  display: grid; grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto;> .container  display: grid; grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >      
```
```
 .container  display: grid; grid-template: [row1-start] 25px [row1-end] [row2-start] 25px [row2-end] / auto 50px auto; grid-template-areas: "header header header" "footer footer footer";> .container  display: grid; grid-template: [row1-start] 25px [row1-end] [row2-start] 25px [row2-end] / auto 50px auto; grid-template-areas: "header header header" "footer footer footer"; >      
```
Но техническая возможность есть, выбирать вам! ��

row — gap , column — gap

Скопировать ссылку «row-gap, column-gap» Скопировано

Задают отступы между рядами или колонками.
```
 .container  display: grid; grid-template-columns: 1fr 350px 1fr; grid-template-rows: repeat(3, 150px); /* Отступы между рядами */ row-gap: 50px; /* Отступы между колонками */ column-gap: 20px;> .container  display: grid; grid-template-columns: 1fr 350px 1fr; grid-template-rows: repeat(3, 150px); /* Отступы между рядами */ row-gap: 50px; /* Отступы между колонками */ column-gap: 20px; >      
```
В инспекторе отступы заштриховываются, так их можно отличить от грид-элементов. В этом примере между рядами отступы по 50 пикселей, а между колонками — по 20 пикселей.

gap

Скопировать ссылку «gap» Скопировано

Шорткат для записи значений свойств row — gap и column — gap . Значения разделяются пробелом:
```
 .container  display: grid; grid-template-columns: 1fr 350px 1fr; grid-template-rows: repeat(3, 150px); gap: 50px 20px;> .container  display: grid; grid-template-columns: 1fr 350px 1fr; grid-template-rows: repeat(3, 150px); gap: 50px 20px; >      
```
justify — content

Скопировать ссылку «justify-content» Скопировано

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

start — выравнивает сетку по левой стороне грид-контейнера.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: start;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: start; >      
```
end — выравнивает сетку по правой стороне грид-контейнера.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: end;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: end; >      
```
center — выравнивает сетку по центру грид-контейнера.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: center;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: center; >      
```
stretch — масштабирует элементы, чтобы сетка могла заполнить всю ширину грид-контейнера.
```
 .container  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; justify-content: stretch;> .container  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; justify-content: stretch; >      
```
space — around — одинаковое пространство между элементами и полуразмерные отступы по краям.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-around;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-around; >      
```
space — evenly — одинаковое пространство между элементами и полноразмерные отступы по краям.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-evenly;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-evenly; >      
```
space — between — одинаковое пространство между элементами без отступов по краям.
```
 .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-between;> .container  display: grid; grid-template-columns: repeat(3, 300px); gap: 20px; justify-content: space-between; >      
```
justify — items

Скопировать ссылку «justify-items» Скопировано

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

start — выравнивает элемент по начальной (левой для LTR) линии.
```
 .container  display: grid; grid-template-columns: 1fr 400px 1fr; grid-template-rows: repeat(3, 170px); gap: 20px; justify-items: start;> .item  min-width: 300px;> .container  display: grid; grid-template-columns: 1fr 400px 1fr; grid-template-rows: repeat(3, 170px); gap: 20px; justify-items: start; > .item  min-width: 300px; >      
```
end — выравнивает элемент по конечной (правой для LTR) линии.
```
 .container  justify-items: end;> .container  justify-items: end; >      
```
center — выравнивает элемент по центру грид-ячейки.
```
 .container  justify-items: center;> .container  justify-items: center; >      
```
stretch — растягивает элемент на всю ширину грид-ячейки.
```
 .container  justify-items: stretch;> .container  justify-items: stretch; >      
```
Можно управлять выравниванием отдельных грид-элементов при помощи свойства justify — self .

align — items

Скопировать ссылку «align-items» Скопировано

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

start — выравнивает элемент по начальной (верхней) линии.
```
 .container  display: grid; grid-template-columns: 1fr 400px 1fr; grid-template-rows: repeat(3, 170px); gap: 20px; align-items: start;> .item  min-height: 100px;> .container  display: grid; grid-template-columns: 1fr 400px 1fr; grid-template-rows: repeat(3, 170px); gap: 20px; align-items: start; > .item  min-height: 100px; >      
```
end — выравнивает элемент по конечной (нижней) линии.
```
 .container  align-items: end;> .container  align-items: end; >      
```
center — выравнивает элемент по центру грид-ячейки.
```
 .container  align-items: center;> .container  align-items: center; >      
```
stretch — растягивает элемент на всю высоту грид-ячейки.
```
 .container  align-items: stretch;> .container  align-items: stretch; >      
```
Можно также управлять выравниванием отдельных грид-элементов при помощи свойства align — self .

place — items

Скопировать ссылку «place-items» Скопировано

Шорткат для указания значений сразу и для align — items и для justify — items . Указывать нужно именно в таком порядке.
```
 .container  display: grid; place-items: stretch end;> .container  display: grid; place-items: stretch end; >      
```
grid

Скопировать ссылку «grid» Скопировано

Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:
- grid — template — rows ;
- grid — template — columns ;
- grid — template — areas ;
- grid — auto — rows ;
- grid — auto — columns ;
- grid — auto — flow .
Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.

none — значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.
```
 .container  display: grid; grid: none;> .container  display: grid; grid: none; >      
```
Можно указать допустимые значения для шортката grid — template :
```
 .container  display: grid; grid: repeat(4, 150px) / 1fr 200px 1fr;> .container  display: grid; grid: repeat(4, 150px) / 1fr 200px 1fr; >      
```
В том числе можно указать имена линий:
```
 .container  display: grid; grid: [row1-start] 25px [row1-end row2-start] 25px [row2-end] / auto 50px auto;> .container  display: grid; grid: [row1-start] 25px [row1-end row2-start] 25px [row2-end] / auto 50px auto; >      
```
Можно задать размеры колонок и рядов. Создадим два ряда и две колонки:
```
 .container  display: grid; grid: 200px 100px / 30% 30%;> .container  display: grid; grid: 200px 100px / 30% 30%; >      
```
auto — flow — это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды.

Если auto — flow стоит справа от слэша, то будут создаваться автоматические колонки:
```
 .container  display: grid; grid: 200px 100px / auto-flow 30%;> .container  display: grid; grid: 200px 100px / auto-flow 30%; >      
```
Если auto — flow стоит слева от слэша, то будут создаваться автоматические ряды:
```
 .container  display: grid; grid: auto-flow 30% / 200px 100px;> .container  display: grid; grid: auto-flow 30% / 200px 100px; >      
```
dense — к ключевому слову auto — flow можно добавить dense . Это укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Подробнее про работу этого ключевого слова можно почитать в статье про grid — auto — flow .

Важно ставить это слово сразу после auto — flow :
```
 .container  display: grid; grid: auto-flow dense 30% / 200px 100px;> .container  display: grid; grid: auto-flow dense 30% / 200px 100px; >      
```
Ниже будет несколько примеров с блоками кода, которые делают одно и то же, в первом случае через шорткат, во втором — как обычно.

Задаёт размеры и количество колонок и рядов:
```
 .container  grid: 50px 150px / 2fr 1fr;> .container  grid-template-rows: 50px 150px; grid-template-columns: 2fr 1fr;> .container  grid: 50px 150px / 2fr 1fr; > .container  grid-template-rows: 50px 150px; grid-template-columns: 2fr 1fr; >      
```
Задаёт размеры и количество рядов, а также автоматические колонки:
```
 .container  grid: 200px 1fr / auto-flow 200px;> .container  grid-auto-flow: column; grid-template-rows: 200px 1fr; grid-auto-columns: 200px;> .container  grid: 200px 1fr / auto-flow 200px; > .container  grid-auto-flow: column; grid-template-rows: 200px 1fr; grid-auto-columns: 200px; >      
```
Задаёт размеры и количество рядов, автоматические колонки и распределение dense :
```
 .container  grid: auto-flow dense 300px / 2fr 3fr;> .container  grid-auto-flow: row dense; grid-auto-rows: 300px; grid-template-columns: 2fr 3fr;> .container  grid: auto-flow dense 300px / 2fr 3fr; > .container  grid-auto-flow: row dense; grid-auto-rows: 300px; grid-template-columns: 2fr 3fr; >      
```
Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям:
```
 .container  grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto;> .container  grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >      
```
Что соответствует такому коду:
```
 .container  grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto;> .container  grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; >      
```
Свойства грид-элементов

Скопировать ссылку «Свойства грид-элементов» Скопировано

Важное замечание: свойства 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-column-end, grid-row-start, grid-row-end» Скопировано

Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии.
- название или номер линии — может быть порядковым номером или названием конкретной линии.
- span число — элемент растянется на указанное количество ячеек.
- span имя — элемент будет растягиваться до следующей указанной линии.
- auto — означает автоматическое размещение, автоматический диапазон клеток или дефолтное растягивание элемента, равное одному.
```
 .container  display: grid; grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six]; grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;> .item1  grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3;> .container  display: grid; grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six]; grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr; > .item1  grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; >      
```
Элемент разместился по горизонтали от второй грид-линии до линии с названием [five ] , а по вертикали — от линии с именем [row1 — start ] до линии под номером 3.
```
 .container  display: grid; grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [col4-start] 1fr [five] 1fr [end]; grid-template-rows: [row1-start] 1fr [row1-end] 1fr [third-line] 1fr [last-line];> .item1  grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2;> .container  display: grid; grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [col4-start] 1fr [five] 1fr [end]; grid-template-rows: [row1-start] 1fr [row1-end] 1fr [third-line] 1fr [last-line]; > .item1  grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; >      
```
Элемент расположился по вертикали от второй грид-линии и растянулся на две ячейки, а по горизонтали — от первой линии и растянулся до линии с названием [col4 — start ] .

Если не указать значения для свойств grid — column — end и grid — row — end , то элемент по умолчанию будет размером в одну грид-ячейку.

Элементы могут перекрывать друг друга, накладываться друг на друга. Можно использовать свойство z — index для управления контекстом наложения.

grid — column , grid — row

Скопировать ссылку «grid-column, grid-row» Скопировано

Свойства-шорткаты для grid — column — start , grid — column — end и grid — row — start , grid — row — end соответственно.

Значения для * — start и * — end разделяются слэшем.

Можно использовать ключевое слово span , буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.
```
 .item1  grid-column: 3 / span 2; grid-row: 3 / 4;> .item1  grid-column: 3 / span 2; grid-row: 3 / 4; >      
```
Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от третьей линии и заканчивается у четвёртой линии.

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

grid — area

Скопировать ссылку «grid-area» Скопировано

Двуличное свойство ��, которое может как указывать элементу, какую из именованных областей ему нужно занять, так и служить шорткатом для одновременного указания значений для четырёх свойств: grid — column — start , grid — column — end , grid — row — start и grid — row — end .

Пример с указанием на именованную область:
```
 .item1  /* Займёт область content внутри грид-сетки */ grid-area: content;> .item1  /* Займёт область content внутри грид-сетки */ grid-area: content; >      
```
А теперь пример с указанием всех четырёх значений в строку. При таком указании значений есть скользкое место: значения указываются в таком порядке: row — start / column — start / row — end / column — end , то есть сначала указываем оба начала, а потом оба конца.
```
 .item2  grid-area: 1 / col4-start / last-line / 6;> .item2  grid-area: 1 / col4-start / last-line / 6; >      
```
justify — self

Скопировать ссылку «justify-self» Скопировано

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

Возможные значения аналогичны значениям свойства justify — items .
```
 .container  justify-items: stretch;> .item1  justify-self: center;> .container  justify-items: stretch; > .item1  justify-self: center; >      
```
align — self

Скопировать ссылку «align-self» Скопировано

А это свойство, как нетрудно догадаться, выравнивает отдельный элемент по вертикальной оси. Возможные значения аналогичны значениям свойства align — items .
```
 .container  align-items: stretch;> .item1  align-self: start;> .container  align-items: stretch; > .item1  align-self: start; >      
```
place — self

Скопировать ссылку «place-self» Скопировано

Шорткат для одновременного указания значений свойствам justify — self и align — self .
- auto (значение по умолчанию) — стандартное значение, можно использовать для сброса ранее заданных значений.
- align — self justify — self — первое значение задаёт значение свойству align — self , второе значение устанавливает значение свойства justify — self . Если указано всего одно значение, то оно устанавливается для обоих свойств. Например, place — self : center отцентрирует элемент по горизонтальной и по вертикальной осям одновременно.
Специальные функции и ключевые слова

Скопировать ссылку «Специальные функции и ключевые слова» Скопировано

Когда вы задаёте размеры колонкам и рядам, вам доступны не только давно известные единицы измерения ( px , vw , rem , % и так далее), но и очень крутые ключевые слова min — content , max — content и auto . И уже упомянутые единицы измерения fr .

Гриды подарили нам ещё одну волшебную функцию, позволяющую одновременно задавать минимальный и максимальный размер — minmax ( ) . Например, в случае записи grid — template — columns : minmax ( 200px , 1fr ) ; колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей.

Ещё одна полезная функция, появившаяся в гридах, это repeat ( ) . Сэкономит вам кучу лишних букв и времени.

Анимация свойств

Скопировать ссылку «Анимация свойств» Скопировано

Для анимации доступны следующие свойства и их значения:
- Значения свойств gap , row — gap , column — gap , указанные в единицах измерения, процентах или при помощи calc ( ) .
- Значения свойств grid — template — columns , grid — template — rows , указанные в единицах измерения, процентах или при помощи функции calc ( ) при условии, что анимируются аналогичные значения.
Ссылки

Скопировать ссылку «Ссылки» Скопировано
1. A Complete Guide to Grid
2. Grid Cheatsheet
3. Grid Garden
4. GRID cheat sheet
5. Learning CSS Grid
6. Animating CSS Grid Layout properties
На практике

Скопировать ссылку «На практике» Скопировано

Балдин Кирилл советует

Скопировать ссылку «Балдин Кирилл советует» Скопировано

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

В мобильной версии нужно сильно поменять порядок отображения, а для SEO нужно сохранить определённый порядок.

В демо ниже используются именованные области для расположения элементов. При переключении на мобильную версию элементы перестраиваются в нужном порядке за счёт изменения расположения именованных областей
```
 .cart-product  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); grid-template-areas: "image image image title title title" "image image image price rating rating" "features features features price payment payment" "description description description description reviews reviews " "shipping contact availability availability warranty sizes" "material material related related related related";> @media (max-width: 720px)  .cart-product  grid-template-columns: repeat(4, 1fr); grid-template-areas: "image image price rating" "image image description description" "title title title title" "reviews reviews features features" "availability payment shipping contact" "warranty warranty sizes sizes" "warranty warranty sizes sizes" "material material material related"; >> .cart-product  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); grid-template-areas: "image image image title title title" "image image image price rating rating" "features features features price payment payment" "description description description description reviews reviews " "shipping contact availability availability warranty sizes" "material material related related related related"; > @media (max-width: 720px)  .cart-product  grid-template-columns: repeat(4, 1fr); grid-template-areas: "image image price rating" "image image description description" "title title title title" "reviews reviews features features" "availability payment shipping contact" "warranty warranty sizes sizes" "warranty warranty sizes sizes" "material material material related"; > >      
```
Балдин Кирилл — наставник на курсе «Мидл фронтенд-разработчик» в Яндекс Практикуме.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Самый удобный инструмент для инспектирования вёрстки на гридах на сегодня в браузере Firefox! Даже если в остальное время вы сидите в другом браузере, то на время вёрстки я настоятельно советую вам переключиться. Ничего удобнее человечество ещё не придумало ��

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

Скопировать ссылку «Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?» Скопировано

Скопировать ссылку «Матвей Романов отвечает» Скопировано

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

Во всех остальных случаях можно смело использовать флексбоксы.

CSS margin:auto — Как это работает?

Использование margin:auto , чтобы отцентрировать блочный элемент по горизонтали, это хорошо известный способ. Но задумывались ли вы, как это работает?

Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

«auto» — занять все доступное пространство

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

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

Имитация плавающего поведения через распределение доступного пространства

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

«auto» — задать 0 пикселей

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

Это будет только нарушать изначальную структуру. В том числе и для отступа текста сверху CSS . Следовательно, auto будет задавать значение 0 пикселей для отступов этих элементов.

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

Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100% . Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

Что происходит с вертикальными отступами со значением auto?

auto и для отступа сверху CSS , и для нижнего отступа всегда вычисляется как 0 пикселей ( за исключением абсолютно позиционированных элементов ). В спецификации W3C указано следующее:

«Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

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

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

Или из-за эффекта объединения отступов ( слияния отступов соседних элементов ). Это еще одно исключение из данного правила определения вертикальных отступов.

Центрирование абсолютно позиционированных элементов

Так как для абсолютно позиционированных элементов введено исключение, можно использовать значение auto , чтобы выровнять их по центру вертикально и горизонтально. Но сначала нужно выяснить, когда margin:auto будет работать именно так для отступа сверху CSS .

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right. »
» Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left , width и right не должно задаваться значение auto ( их значение по умолчанию ). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static. «

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top , height и bottom не должны иметь значение auto .

Теперь, объединив все это, мы получим следующее:

Заключение

Если вам требуется сместить элемент на странице вправо или влево без контейнерных элементов ( например, как в случае с float ), помните, что есть возможность использовать для отступов значение auto .

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

Вадим Дворников автор-переводчик статьи « CSS – margin auto – How it Works »

Строчно-блочные элементы

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

Рис. 1. Галерея фотографий

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

Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block .

Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: , , , .

Характеристики этих элементов следующие.
- Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Размеры содержимого можно устанавливать через свойства width и height .
- Ширина блока получается сложением значений width , margin , border и padding .
- Высота блока получается сложением значений height , margin , border и padding .
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
- Перенос текста считается за пробел.
Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block , а внутрь элемента добавить изображение и подпись к нему через (пример 1).

Пример 1. Создание галереи

Галерея

Софийский собор

Польский костёл

Купеческий клуб

Памятник Св. Владимиру

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

Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).

Пример 2. Макет из трёх колонок

Колонки создаём с помощью элементов и в стилях для каждой колонки устанавливаем свойство display со значением inline-block , а также задаём выравнивание по верхнему краю через vertical-align . Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box . После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.

Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.

Рис. 2. Перенос колонки на другую строку

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

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

Перенос атрибутов в на другую строку.
```
Колонка 2
Колонка 3
```
В HTML допустимо переносить закрывающую угловую скобку.

Перенос текста внутри .

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

Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.

В CSS тоже есть несколько методов.

Отрицательный margin-right или margin-left . Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.
```
section
```
Нулевой размер шрифта. Для родительского элемента ставим нулевое значение font-size , а затем для возвращаем его в желаемое значение.
```
main < font-size: 0; >section
```
После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).

Рис. 3. Макет из трёх колонок

Читать:
Как разобрать сетевой адаптер alcatel