Понимание css grid (3 часть): grid-области

Содержание:

Summary
- - Overflow And Data Loss In CSS
CSS Reference
CSS Properties
grid-auto-flow
Размеры содержимого сетки
CSS Advanced
Grid Gaps
- Example
- Example
- Example
- Example
Property Values
CSS Properties
CSS Properties
CSS Advanced
Описание разметки с помощью свойства ‘grid-template-areas’
- Правила использования
- Форматирование строк
Свойства грид-элементов
Значения свойств
Describing Layout With grid-template-areas
- Rules For Using
- Formatting The Strings
Именование элементов сетки
- Пример
- Пример
- Пример
- Пример
CSS Advanced
CSS Reference
CSS Properties
Свойства грид-элементов 🔗
- , , ,
  - Возможные значения:
- ,
  - Возможные значения:
Линии неявной сетки

Summary

That’s the lowdown on using the and properties to create layouts. If you haven’t used this layout method before, give it a try. I find that it is a lovely way to experiment with layouts and often use it when prototyping a layout — even if for one reason or another we will ultimately use a different method for the production version.

Overflow And Data Loss In CSS

CSS is designed to keep your content readable. Let’s explore situations in which you might encounter overflow in your web designs and how CSS has evolved to create better ways to manage and design around unknown amounts of content. Read a related article →

(il)

CSS Reference

Css overflow-y property

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

Стиль и размер текста в css

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

grid-auto-flow

Медиа-запросы

Copied!

Свойство grid-auto-flow управляет тем, как работает алгоритм автоматического размещения, точно указывая, как элементы попадают в сетку.

Наследуется: нет.

Применяется к: grid контейнерам.

Значение по умолчанию: row.

row: Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.
column: Алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы.
dense: алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.

Размеры содержимого сетки

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

Пиксели: указываем нужный нам размер или пользуемся функцией minmax(), которая задаёт минимальный и максимальный размер дорожки.

Относительные величины: Если ширина или высота у нас зависят от размеров окна браузера, то можно использовать относительную величину vh (высота окна) или vw (ширина окна):

100vh — вся высота окна,

33vh — треть высоты,

50vw — половина ширины окна браузера.

Для простоты можно представить, что числа перед vh и vw — это проценты. 100 — это сто процентов, вся видимая часть, 50 — это половина и так далее. Можно указать больше 100, тогда содержимое уедет за границы окна и нужно будет использовать прокрутку вниз или вбок.

FR работает так:

создаёт дорожки с нужными пропорциями;
или разрешает занимать одной дорожке всю свободную область окна браузера.

Например:

— 4 колонки одинаковой ширины;

— последняя колонка будет шире остальных в три раза.

Если нам нужно что-то растянуть на всё свободное место, мы можем указать размеры остальных элементов, а там, где нужно растянуть, напишем 1fr:

Этот код сделает нам три колонки — первая и третья шириной 100 пикселей, а вторая (центральная) займёт всё остальное место. Если размер окна изменится, то боковые колонки останутся по 100 пикселей, а центральная перестроится.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Grid Gaps

The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

Example

The property sets the gap between the columns:

.grid-container {
display: grid; grid-column-gap: 50px;}

Example

The property sets the gap between the rows:

.grid-container {
display: grid; grid-row-gap: 50px;}

Example

The property is a shorthand property for the
and the
properties:

.grid-container {
display: grid; grid-gap: 50px 100px;}

Example

The property can also be used to set both the row gap and the
column gap in one value:

.grid-container {
display: grid; grid-gap: 50px;}

Property Values

Value	Description	Play it
none	Default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns	Specifies the size(s) of the columns and rows	Play it »
grid-template-areas	Specifies the grid layout using named items	Play it »
grid-template-rows / grid-auto-columns	Specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns	Specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns	Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns	Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Properties

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Описание разметки с помощью свойства ‘grid-template-areas’

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

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

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

Увидеть это в действии можно на примере CodePen, размещённого ниже. У меня есть четыре элемента (с классами от одного до четырёх), которые присваиваются соответствующим grid-областям с помощью свойства `grid-area’ и поэтому отображаются на сетке в нужном блоке.

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

Правила использования

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

Правило №1: Описывайте всю сетку

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

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

Следовательно, если я изменю значение свойства на следующее:

то теперь у нас есть две незаполненные ячейки. Элемент «three» отображается только в последней строке сетки.

Правило №2: Одно имя – одна область

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

Правило №3: Только прямоугольные области

Нельзя создавать непрямоугольные области, следовательно, данное свойство нельзя использовать для создания ‘L’ или ‘T’-образных областей – это также делает всё свойство некорректным и приводит к его игнорированию:

Форматирование строк

Мне нравится оформлять значение свойства так, как изображено на примере выше, где каждая строка представляет строковый трек сетки. Это даёт визуальное представление о том, как будет выглядеть итоговый макет.

Также может быть полезным вставлять дополнительные отступы между ячейками, а пустые ячейки обозначать несколькими точками.

В приведённом ниже примере я вставила дополнительные пробелы у ячеек с коротким названием и несколько точек для пустых ячеек, чтобы визуально образовались не только строки, но и столбцы:

Тем не менее, вполне допустимой является и запись всех строк в одну линию, как в следующем примере:

Свойства грид-элементов

Шкала CSS Grid

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

целые числа (1, 2, 3 и т.д.)
ключевое слово

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

При использовании функции мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

Продолжаем веселиться!

Данное свойство позволяет объединять колонки. Оно является сокращением для:

Результат:

Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.

Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова :

Давайте «присвоим» 8 фракций :

Результат:

Небольшая заметка

Как мы производим вычисления? занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.

Как использовать ключевое слово

Считается, что использование делает код более читаемым.

В этом случае нам просто нужно добавить к 8 частей:

Это даст такой же результат.

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к 9 частей:

Расчет выглядит так: занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со :

Результат:

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

Определяем в родительском классе:

Затем определяем в дочерних классах:

Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:

Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:

Значения свойств

Значение	Описание
none	Значение по умолчанию. Нет конкретных размеров столбцов или строк
grid-template rows / grid-template-columns	Specifies the size(s) of the columns and rows
grid-template-areas	Specifies the grid layout using named items
grid-template rows / grid-auto-columns	Задает размер (высоту) строк и автоматический размер столбцов
grid-auto-rows / grid-template-columns	Задает автоматический размер строк и задает свойство столбцов сетки-шаблона
grid-template rows / grid-auto-flow grid-auto-columns	Задает размер (высоту) строк и порядок размещения автоматически размещаемых элементов, а также автоматический размер столбцов
grid-auto flow grid-auto-rows / grid-template-columns	Задает способ размещения автоматически размещаемых элементов и автоматического размера строк, а также задает свойство столбцов сетки-шаблона
initial	Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit	Наследует это свойство из родительского элемента. Read about inherit

Describing Layout With grid-template-areas

The property accepts one or more strings as a value. Each string (enclosed in quotes) represents a row of your grid. You can use the property on a grid that you have defined using and , or you can create your layout in which case all rows will be auto-sized.

The following property and value describe a grid with four areas — each spanning two column tracks and two row tracks. An area is caused to span multiple tracks by repeating the name in all of the cells that you would like it to cover:

Items are placed into the layout by being named with an ident using the property. Therefore, if I want to place an element with a class of into the area of the grid named , I use the following CSS:

You can see this in action in the CodePen example shown below. I have four items (with classes one to four); these are assigned to the relevant grid area using the property and therefore display on the grid in the correct boxes.

See the Pen Simple grid-template-areas example by Rachel Andrew (@rachelandrew) on CodePen.

If you use the Firefox Grid Inspector, then you can see the area names and the grid lines demonstrating that each item does indeed span two row and two column tracks — all without doing any line-based positioning on the item itself.

Rules For Using

There are a few rules when creating a layout in this way. Breaking the rules will make the value invalid and therefore your layout will not happen. The first rule is that you must describe a complete grid, i.e. every cell on your grid must be filled.

If you do want to leave a cell (or cells) as empty space, you do this by inserting a or series such as with no space between them.

Therefore, if I change the value of as follows:

I now have two cells with no content in them. Item three only displays in the last row of the grid.

You can only define each area once, meaning that you can’t use this property to copy content into two places on the grid! So the following value would be invalid and cause the entire property to be ignored as we have duplicated the area :

You can’t create a non-rectangular area, so the property can’t be used to create an ‘L’ or ‘T’ shaped area — making the following value also invalid:

Formatting The Strings

I like to display the value of as I have above (with each string representing a row below the row before). This gives me a visual representation of what the layout will be.

To help with this, it is valuable to add additional whitespace characters between each cell, and also to use multiple characters denoting empty cells.

In the value below, I have used multiple whitespace characters between smaller words, and also multiple characters so the empty cells line up:

That said, it is also completely valid to have all of the strings on one line, so we could write our example as follows:

More after jump! Continue reading below ↓

Именование элементов сетки

Свойство также можно использовать для присвоения имен элементам сетки.

Пример

Item1 gets the name «myArea» and spans all five columns in a five columns grid layout:

.item1 { grid-area:
myArea;}.grid-container { grid-template-areas: ‘myArea myArea
myArea myArea myArea’;}

Каждая строка определяется апострофами (‘ ‘)

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

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

Пример

Пусть «мяреа» span два столбца в сетке пять столбцов макета (знаки периода представляют элементы без имени):

.item1 { grid-area:
myArea;}.grid-container { grid-template-areas: ‘myArea myArea
. . .’;}

Чтобы определить две строки, определите столбец второй строки внутри другого набора апострофов:

Пример

Сделать «Item1» охватывают два столбца и две строки:

.grid-container { grid-template-areas: ‘myArea myArea
. . .’ ‘myArea myArea . . .’;}

Пример

Назовите все элементы и сделайте готовый к использованию шаблон веб-страницы:

.item1 { grid-area: header; }.item2 { grid-area: menu; }.item3 {
grid-area: main; }.item4 { grid-area: right; }.item5 { grid-area:
footer; }.grid-container { grid-template-areas:
‘header header header header header header’    ‘menu main
main main right right’    ‘menu footer footer footer footer
footer’;}

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS Reference

CSS Properties

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Свойства грид-элементов 🔗

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

, , ,

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

Возможные значения:

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

Элемент разместился по горизонтали от второй грид-линии до линии с названием , а по вертикали от линии с именем до линии с номером 3.

Элемент расположился по вертикали от 2 грид-линии и растянулся на две ячейки, а по горизонтали от первой линии и растянулся до линии с названием .

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

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

Поддерживается всеми современными браузерами. Проверить поддержку свойства и значений: grid-column-start grid-column-end grid-row-start grid-row-end

,

Свойства-шорткаты для + и + соответственно.

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

Можно использовать ключевое слово , буквально говорящее «растянись на столько-то». А на сколько указывает стоящая за ним цифра.

Элемент начинается с третьей линии по горизонтали и растягивается на 2 клетки. По вертикали элемент начинается от линии с именем и заканчивается у четвёртой линии.

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

Поддерживается всеми современными браузерами. Проверить поддержку свойства и значений: grid-column grid-row

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

Пример с указанием на именованную область:

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

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

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

Возможные значения аналогичны значениям свойства

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

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

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

Шорткат для одновременного указания значений для свойств и .

Возможные значения:

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

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

Линии неявной сетки

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

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

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