CSS Grid

CSS Grid — схема расположения блоков на странице, пришедшая на смену, или даже в помощь Flex-box схеме.  

Контейнер
Ячейка
 
Ячейка
 
Ячейка
Ячейка
Ячейка
Ячейка

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

display

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

.container {
  display: grid | inline-grid;
}
  • grid — блочный элемент
  • inline-grid — строчный элемент

Для дочерних элементов grid контейнера перестают работать такие свойства как: floatdisplay: inline-blockdisplay: table-cellvertical-align и column-*.

grid-template-columns / grid-template-rows

Параметры определяют строки и колонки, которые будут находиться внутри контейнера. 

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
  • <track-size> —  может быть длиной, процентом или долей свободного места в сетке (единица fr). При необходимости повторения используется repeat(). 
  • <line-name> —  любое название, указанное вами.

Как это работает

Когда вы оставляете не заполненным параметр имени не заполненным, т.е. указываете только размеры, линиям сетки автоматически назначаются положительные и отрицательные номера:

.container {
  grid-template-columns: 100px 150px auto 150px 100px;
  grid-template-rows: 25% 100px auto;
}
  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]

Но, линиям можно присвоить определенные имена, указав их в параметре:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
  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:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

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

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

Если несколько строк имеют одинаковые имена, на конкретную строку можно сослаться указав имя и порядковый номер:

.item {
  grid-column-start: col-start 2;
}

Размер может быть долей, при использовании единицы fr. Например, так каждая ячейка таблицы будет занимать треть от размера контейнера:

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

Свободное пространство для распределения на доли вычисляется после того как оттуда вычитаются остальные статичные размеры:

/* В этом примере из общей ширины контейнера 
сперва вычитаются значения 1rem, 1em, 50px, затем, 
оставшаяся часть контейнера делится на 4 (количество долей указанных в вызове), 
и распределяется по элементам */

.container {
  grid-template-columns: 1rem 1em 1fr 50px 2fr 1fr;
}

 

grid-template-areas

Свойство задает шаблон сетки, который определяется свойством grid-area.

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

Как это работает

Допустим, необходимо создать типичный шаблон, с шапкой и подвалом во всю ширину, а в центральной части расположить 1 широкий, 1 узкий и 1 пустой фрагмент пространства:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

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

Шапка

Основной блок

Пустота

Левый блок

При данном подходе к созданию сетки нельзя присваивать имена промежуточным линиям. Имена присваиваются автоматически, к конечным линиям областей, исходя из их названий. Например, начальная линия области header будет называться header-start, конечная header-end. Соответственно некоторые линии будут иметь несколько имен, например начальная вертикальная линия из примера выше будет именоваться header-start, main-start и footer-start.

grid-template

Сокращение для настройки grid-template-rowsgrid-template-columns и grid-template-areas в одной декларации.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

/* Усложненный синтаксис */
.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
  • none — устанавливает все три свойства в их начальное значение.
  • <grid-template-rows> / <grid-template-columns> — устанавливает grid-template-columns и grid-template-rows в указанные значения, а grid-template-areas в none.

grid-template не приводит к сбросу неявных свойств сетки (grid-auto-columns, grid-auto-rows и grid-auto-flow), поэтому в большинстве случаев может быть удобнее использовать свойство grid.

grid-column-gap / grid-row-gap

Определяет размер линий сетки. Иногда это представляют как ширину желобов между столбцами / строками.

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

/* Chrome 68+, Safari 11.2 Release 50+, Opera 54+. */
.container {
  column-gap: <line-size>;
  row-gap: <line-size>;
}

<line-size> — размер.

Линии создаются только между колонками / строками, с внешних сторон линий нет.

Как это работает

.container {
  grid-template-columns: 40% 10% 40%;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}
 
 
 
 

 

 

 

 

 

grid-gap

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

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

/* Chrome 68+, Safari 11.2 Release 50+, Opera 54+. */
.container {
  gap: <grid-row-gap> <grid-column-gap>;
}

<grid-row-gap> <grid-column-gap> — размер значений. Если указано только 1 значение, он распространиться на оба параметра.

justify-items

Выравнивает элементы сетки вдоль оси строки (в отличие от align-items не выравнивается вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

.container {
  justify-items: start | end | center | stretch;
}

По умолчанию: stretch

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

align-items

Выравнивает элементы сетки вдоль оси столбца (в отличие от justify-items не выравнивается вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

.container {
  align-items: start | end | center | stretch;
}

По умолчанию: stretch 

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

place-items

Сокращение свойств align-items и justify-items в одном объявлении.

.container {
  place-items: <align-items> / <justify-items>;
}</justify-items></align-items>
  • <align-items> / <justify-items> — первое значение устанавливает align-items, второе значение justify-items. Если второе значение опущено, первое значение присваивается обоим свойствам.

justify-content

Выравнивает сетку в контейнере вдоль оси строки  (в отличие от align-content не выравнивает сетку вдоль оси столбца).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}
  • start — сетка у начального края контейнера 
     
     
     
     
     
     
     
     
     
  • end — сетка у конечного края контейнера  
     
     
     
     
     
     
     
     
     
  • center — сетка по центру контейнера
     
     
     
     
     
     
     
     
     
  • stretch — изменяет ячейки сетки, чтобы сетка заполняла всю ширину контейнера 
     
     
     
     
     
     
     
     
     
  • space-around — между ячейками сетки размещается равное пространство, за исключением крайних элементов, где пространство равняется половине пространства между ячеек
     
     
     
     
     
     
     
     
     
  • space-between —  между ячейками сетки размещается равное пространство, за исключением крайних элементов, которые размещаются впритык к краю
     
     
     
     
     
     
     
     
     
  • space-evenly — между ячейками сетки размещается равное пространство, включая крайние элементы 
     
     
     
     
     
     
     
     
     

align-content

Выравнивает сетку в контейнере вдоль оси столбца (в отличие от justify-content не выравнивает сетку вдоль оси строки).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}
  • start — сетка в начале контейнера
     
     
     
     
     
     
     
     
     
  • end — сетка в конце контейнера
     
     
     
     
     
     
     
     
     
  • center — сетка в центре контейнера 
     
     
     
     
     
     
     
     
     
  • stretch — изменяет размеры ячеек сетки, чтобы сетка заполняла всю высоту контейнера 
     
     
     
     
     
     
     
     
     
  • space-around — между ячейками сетки размещается равное пространство, за исключением крайних элементов, где пространство равняется половине пространства между ячеек
     
     
     
     
     
     
     
     
     
  • space-between — между ячейками сетки размещается равное пространство, за исключением крайних элементов, которые размещаются впритык к краю 
     
     
     
     
     
     
     
     
     
  • space-evenly — между ячейками сетки размещается равное пространство, включая крайние элементы 
     
     
     
     
     
     
     
     
     

grid-auto-columns / grid-auto-rows

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

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
  • <track-size> — может указываться длиной, процентом или долей свободного места в сетке (используя единицу fr) 

Как это работает?

/* Определим сетку 2*2 */
.container {
  grid-template-columns: 70px 70px;
  grid-template-rows: 90px 90px;
}

/* Определим 2 элемента */
.inner {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.outer {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

На выходе получим сетку, где 2 первых столбца ячеек имеют ширину 70px и высоту 90px, а остальные ячейки, появляются из-за элемента с классом outer, и высчитываются автоматически.

inner

outer

Чтобы подобные "автоматические" ячейки имели определенный размер, используются свойства grid-auto-columns и grid-auto-rows

Пример с указанной автоматической шириной

.container {
  grid-template-columns: 70px 70px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 70px;
}

inner

outer

grid-auto-flow

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

.container {
  grid-auto-flow: row | column | row dense | column dense
}

По умолчанию: row

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

  • row — алгоритм будет заполнять каждую ячейку построчно, переходя на новую строку по мере необходимости.

    Первый

    Второй

    Третий

    Четвертый

    Пятый

    Шестой

    .first{
      grid-column: 1;
      grid-row: 1 / 3;
    }
    .second{
      grid-column: auto/span 2;
    }
    .fifth {
      grid-column: auto/span 3;
      grid-row: 1 / 3;
    }
    
  • column — алгоритм будет заполнять каждую ячейку по столбцам, переходя в новую строку по мере необходимости. 

    Первый

    Второй

    Третий

    Четвертый

    Пятый

    Шестой

    .first{
      grid-column: 1;
      grid-row: 1 / 3;
    }
    .second{
      grid-column: auto/span 2;
    }
    .fifth {
      grid-column: auto/span 3;
      grid-row: 1 / 3;
    }
    
  • dense — алгоритм пытается заполнить ранние ячейки сетки, если маленькие элементы появляются после больших. (можно устанавливать row dense или column dense)

    Первый

    Второй

    Третий

    Четвертый

    Пятый

    Шестой

    .first{
      grid-column: 1;
      grid-row: 1 / 3;
    }
    .second{
      grid-column: auto/span 2;
    }
    .fifth {
      grid-column: auto/span 3;
      grid-row: 1 / 3;
    }
    

grid

Сокращение для свойств в одном объявлении: grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columns, и grid-auto-flow (можно указывать только явные или неявные свойства сетки в одной декларации).

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}
  • none — устанавливает все вспомогательные свойства в их начальные значения
  • <grid-template> — работает так же, как grid-template сокращенное
  • <grid-template-rows> / [ auto-flow && dense ] <grid-auto-columns>  — устанавливает grid-template-rows указанное значение. Если auto-flow ключевое слово находится справа от косой черты, оно устанавливает grid-auto-flow значение column. Если dense ключевое слово задано дополнительно, алгоритм автоматического размещения использует «плотный» алгоритм упаковки. Если значение grid-auto-columns опущено, оно установлено auto
  • [ auto-flow && dense ] <grid-auto-rows> / <grid-template-columns>  — устанавливает grid-template-columns указанное значение. Если auto-flow ключевое слово находится слева от косой черты, оно устанавливает grid-auto-flow значение row. Если dense ключевое слово задано дополнительно, алгоритм автоматического размещения использует «плотный» алгоритм упаковки. Если значение grid-auto-row sопущено, оно установлено auto.

Примеры

.container {
    grid: 100px 300px / 3fr 1fr;
  }
.container {
    grid: auto-flow / 200px 1fr;
  }
.container {
    grid: auto-flow dense 100px / 1fr 2fr;
  }
.container {
    grid: 100px 300px / auto-flow 200px;
  }
.container {
    grid: [row1-start] "header header header" 1fr [row1-end]
          [row2-start] "footer footer footer" 25px [row2-end]
          / auto 50px auto;
  }

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

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определяет местоположение элемента в сетке, ссылаясь на конкретные линии сетки. 

  • grid-column-start / grid-row-start — позиция, в которой начинается элемент;
  • grid-column-end / grid-row-end —  позиция, в которой заканчивается элемент.
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Значения: 

  • <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, соответственно.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
  • <start-line> / <end-line> — допускаются те же значения что и в полной записи, включая значение span.

grid-area

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

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
  • <name> — любое имя;
  • <row-start> / <column-start> / <row-end> / <column-end> — может быть номером или именем линии.

justify-self

Выравнивает элемент внутри ячейки сетки вдоль оси строки (в отличие от align-self не выравнивается вдоль оси столбца). Это значение относится к элементу внутри одной ячейки.

.item {
  justify-self: start | end | center | stretch;
}

По умолчанию: stretch 

  • start — элемент у начального края ячейки.
  • end — элемент у конечного края ячейки.
  • center — элемент по центру ячейки.
  • stretch — заполняет всю ширину ячейки.

align-self

Выравнивает элемент внутри ячейки сетки вдоль оси столбца (в отличие от justify-self не выравнивается вдоль оси строки). Это значение применяется к элементу внутри одной ячейки.

.item {
  align-self: start | end | center | stretch;
}

По умолчанию: stretch 

  • start — элемент у начального края ячейки.
  • end — элемент у конечного края ячейки.
  • center — элемент по центру ячейки.
  • stretch — заполняет всю длину ячейки.

place-self

Объединяет свойства align-self и justify-self.

.item-a {
  place-self: center;
}
  • auto — значение «по умолчанию», зависящее от параметров верстки.
  • <align-self> / <justify-self> — первое значение устанавливает параметр align-self, второе justify-self. Если второе значение пропущено, первое распространяется на оба параметра. 

 

 

 

 

 

 

?
Была ли статья полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1