Все про grid. Наиболее полное руководство по css grid.

Все про grid. Наиболее полное руководство по css grid.

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

css grid layout

Терминология CSS Grid

Прежде чем мы  начнем разбираться со свойствами Grid layput давайте познакомимся с некоторыми терминами  верстки на гридах.

Контейнер сетки

Контейнер представляет из себя родительский элемент к которому применено свойство display: grid.  Например:

  <div class="container">
    <div class="item1">Item1</div>
    <div class="item2">Item2</div>
    <div class="item3">Item3</div>
</div>

В примере в качестве контейнера используется div с классом container.

Элемент сетки

Каждый вложенный элемент в родительский является элементом сетки. Например:

  <div class="container">
    <div class="item1">Item1</div>
    <div class="item2">Item2</div>
    <div class="item3">Item3</div>
</div>

В примере каждый div с классом item будет являться элементом сетки.

Линии сетки

Это разделительные  линии которые проведены между всеми элементами в сетке. Они могут быть как горизонтальные так и вертикальные.

линии сетки grid

Трек сетки

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

трек сетки

Ячейка грида или сетки

Это пространство между двумя соседними клетками в сетке.

ячейка сетки грид

Область сетки.

Эта область ограниченная  4-мя линиями в сетке грид.

область грида

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

Содержание

Свойства для родительского элемента сетки (контейнера).

display

Задает сетку для родительского элемента. Принимает следующие значения:

  • grid — формирует сетку как грид
  • inline-grid — делает инлайновую сетку на практике  это свойство редко применяется
  • subgrid — используется в том случае если ваш элемент также является и вложенным элементом в другой сетки, то при задании этого свойства размеры будут взяты у родительского элемента а не буду определять собственный.
.cont {
  display: grid | inline-grid | subgrid;
}

И особенно хочется отметить, что  в гридах не будут работать свойства float, clear, vertical-align.

grid-template-columns grid-template-rows

Собственно задают строки и столбцы сетки, то есть определяют размер сетки.  Можно задавать как фиксированные значения в px, % так и  в относительных единицах, определяющих количество свободного пространства в сетки — fr. Также можно для удобства именовать линии сетки.

.container{
  grid-template-columns: 20px 40px auto 50px 40px;
  grid-template-rows: 35% 200px auto;
}

столбцы и строки грид

А вот пример с именованными линиями грид.

  .container {
  grid-template-columns: [first1] 20px [line2] 40px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start1] 25% [row1-end1] 100px [third-line] auto [last-line];
}

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

  .container {
  grid-template-columns: repeat(3, 40px [col-start]) 5%;
}

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

.cont {
  grid-template-columns: 1fr 1fr 1fr;
}

grid-template-areas

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

  • name — имя области
  • . — точка означает что ячейка пустая
  • none — область не задана
  .container {
  grid-template-areas: 
    "name | . | none | ..."
    "...";
}

Пример:

.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Пример создаст сетку из 4 колонок и 3 строк.  1-я строка будет состоять из области header, во 2-й строке будут 2 ячейки main, пустая ячейка и ячейка sidebar и 3-я строка будет полностью состоять из footer.

Читайте также  Что такое Grid Layout.

У каждой строки должно быть одинаковое количество ячеек.

grid-template-areas

grid-template

Представляет собой  сокращенное свойство от свойств grid-template-rows, grid-template-columns, grid-template-areas.   Значения:

  • none  — установит все 3 свойства в их начальное значение
  • subgrid — установит grid-template-rows и grid-template-columns в subgrid,  а grid-template-areas в начальное значение.
  • grid-template-rows/grid-template-columns —  задает значения для строк и столбцов сетки грид соответственно
.container {
  grid-template:
    [row1-start] 35px "header header header" [row1-end]
    [row2-start] "footer footer footer" 35px [row2-end]
    / auto 50px auto;
}

grid-column-gap grid-row-gap

Задает отступы между элементами в сетке.  Значения:

  • size — размер отступа для элементов.
.container {
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 60px auto 80px; 
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

grid-column-gap grid-rows-gap

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

grid-gap

Сокращенное свойство для grid-column-gap  и grid-row-gap.   Пример:

.container{
  grid-template-columns: 120px 100px 100px;
  grid-template-rows: 70px auto 70px; 
  grid-gap: 20px 10px;
}

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

justify-items

Это свойство выравнивает содержимое вдоль оси строки то есть по горизонтали. Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

Примеры:

.cont {
  justify-items: start;
}

justify-items grid

.cont {
  justify-items: stretch;
}

justify-items stretch

align-items

Выравнивает содержимое элементов по оси столбцов или по вертикальной оси. Значения:

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

.cont {
  align-items: start;
}

align-items start

.cont {
  align-items: stretch;
}

align-items grid

justify-content

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

  • start —  выравнивает сетку по левой стороне  контейнера
  • end — выравнивает  сетку оп правой стороне контейнера
  • center — выравнивает сетку по  центру контейнера
  • stretch —  элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям
Читайте также  Именованные grid-линии в Grid Layout

Примеры:

  .cont {
  justify-content: start;
}

grid justify-content

.cont {
  justify-content: space-evenly;    
}

grid justify-content evenly

align-content

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

  • start —  выравнивает сетку по верхней стороне  контейнера
  • end — выравнивает  сетку оп нижней стороне контейнера
  • center — выравнивает сетку по  центру контейнера
  • stretch —  элементы заполняют всю ширину кониейнера
  • space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
  • space-between — задает одинаковое расстояние между элементами без отступов по краям
  • space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

Примеры:

.cont{
  align-content: start; 
}

grid align-content

.cont {
  align-content: space-evenly;  
}

grid align-content space-evenly

grid-auto-columns  grid-auto-rows

Определяет размер созданных элементов, в том случае если они создаются не явно.  Значения:

  • size — размер элементов в любой доступной едеинице измерения

Чтобы понять как работают эти свойства давайте рассмотрим сетку 2х2.

grid auto row

А теперь представте, что мы с помощью свойств grid-column и grid-row позиционируем элементы следующим образом:

.item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

То есть мы указываем элементу .item-2 чтобы он начинался на 5 линии и заканчивался на 6. Поскольку мы ссылаемся на несуществующие линии, то создаются так называемые неявные треки, чтобы заполнить собой  пространство. Вот для задания ширины этим трекам и используются свойства grid-auto-columns и grid-auto-rows.

.cont {
  grid-auto-columns: 80px;
}

grid-auto-columns

grid-auto-flow

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

  • row — строки заполняются поочередно. Новые строки  добавляются при необходимости
  • column — столбцв заполняются поочередно. Новые столбцы добавляются в случае необходимости
  • dense — пустые пространства в  сетке заполняются в случае появления более мелких элементов позже

Примеры:

Пусть есть такой HTML:

 
     <div class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</div>

Определим для них сетку с 5 столбцами и 2 строками. Свойство grid-auto-flow установим в row.

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: row;
}

И укажем размещения в сетке только для двух элементов.

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

В результате получим такую сетку
grid-auto-rows

Читайте также  Повторение строк и столбцов и свойство grid

Если установить grid-auto-flow в значение column, то получим уже такую сетку.

 .container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: column;
}

grid-auto-flow-column

grid

Сокращенное свойство для всех вышеописанных свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow.  Это свойство также задает  grid-column-gap и grid-row-gap на их значения по умолчанию. Значения:

  • none —  задает всем свойствам их значения по умолчанию
  • grid-template-rows / grid-template-columns — задает  соотвественно значения для grid-template-rows и grid-template-columns.
  • <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]  — задает значения для свойств  grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно.

Примеры:

.cont{
  grid: 200px auto / 1fr auto 1fr;
}

Свойства дочерних элементов

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 число — элемент, который будет распространяться на  некоторое количество ячеек
  • spаn имя — элемент будет распространяться до линии с указанным именем
  • auto — задает автоматическое расположение элементов

Примеры:

.item-1 {
  grid-column-start: 1;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

grid-column-start

grid-column grid-row

Сокращенное свойство для grid-column-start + grid-column-end, и grid-row-start + grid-row-end.   Значения:

  • start/end — значения где начинается элемент и где он заканчивается

Примеры:

.item-3 {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-column

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

grid-area

Задает название элементу, чтобы можно было на него сослаться с помощью свойства grid-template-areas. Значения:

  • name — задает имя для элемента
  • <row-start> / <column-start> / <row-end> / <column-end> — можно задавать нумерацию и название линий

Примеры:

.item-4 {
  grid-area: 1 / col4-start / last-line / 6
}

grid-area

justify-self

Позволяет выравнивать содержимое элемента вдоль оси строки.  Применяется непосредственно к содержимому элемента.  Значения:

  • start — выравнивает содержимое по левому краю
  • end — выравнивает содержимое по правому краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно

Примеры:

  .item-1 {
  justify-self: start;
}

justify-self

.item-1 {
  justify-self: stretch;
}

justify-self stretch

align-self

Позволяет выровнить элемент вдоль столбца. Выравнивается содержимое элемента. Значения

  • start — выравнивает содержимое по верхнему краю
  • end — выравнивает содержимое по нижнему краю
  • center — выравнивает содержимое по середине
  • stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

.item-1 {
  align-self: start;
}

grid-align-self

.item-1{
  align-self: stretch;
}

grid-align-self-end

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

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: