Grid-template-rows

Введение в subgrid

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

Вы можете «вкладывать» сетки, делая grid-элементы grid-контейнерами. Эти вложенные сетки, однако, не зависят от родителя и друг от друга, а это значит, что они не берут размер своих треков из родительской сетки. Это затрудняет выстраивание элементов вложенных сеток в соответствии с основной.

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

Например, если вы используете и вложенная сетка охватывает три колоночных трека родителя, её треки будут такого же размера, как и у родительской сетки. Промежутки (gap) наследуются, но могут быть переопределены другими значениями. Имена линий могут быть переданы от родителя в subgrid, но можно объявить также и свои собственные.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic 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 — это не просто таблица с ячейками. Сила grid — в способах выделения нужных ячеек, чтобы ими можно было управлять отдельно.

Для того, чтобы определить нужную ячейку, используют линии, дорожки, области и ячейки сетки:

Линия сетки — это линии, которые и формируют нашу сетку. В нашем примере у нас 4 горизонтальные линии и 5 вертикальные — первые и последние линии тоже считаются.

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

Область сетки — прямоугольник, который получился из нужных нам линий. В нашем примере область задана линиями 2 и 4 по горизонтали и 3 и 5 — по вертикали:

Чтобы управлять поведением и внешним видом области, её нужно выделить в отдельный класс:

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

Building a Responsive Grid-View

Lets start building a responsive grid-view.

First ensure that all HTML elements have the property set to
.
This makes sure that the padding and border are included in the total width and height of
the elements.

Add the following code in your CSS:

* { box-sizing: border-box;}

Read more about the property in our CSS Box Sizing chapter.

The following example shows a simple responsive web page, with two columns:

25%
75%

Example

.menu { width: 25%;
float: left;}
.main { width: 75%;
float: left;}

The example above is fine if the web page only contains two columns.

However, we want to use a responsive grid-view with 12 columns, to have more
control over the web page.

First we must calculate the percentage for one column: 100% / 12 columns =
8.33%.

Then we
make one class for each of the 12 columns, and a number
defining how many columns the section should span:

CSS:

.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}
.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}
.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}
.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width:
100%;}

All these columns should be floating to the left, and have a padding of 15px:

CSS:

{ float: left;
padding: 15px; border: 1px solid red;}

Each row should be wrapped in a . The number of columns
inside a row should always add up to 12:

HTML:

The columns inside a row are all floating to the left, and are therefore
taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will
add a style that clears the flow:

CSS:

.row::after { content: «»;
clear: both; display: table;}

We also want to add some styles and colors to make it look better:

Example

html { font-family: «Lucida Sans», sans-serif;}
.header { background-color: #9933cc;  color: #ffffff;
padding: 15px;}.menu ul {
list-style-type: none;  margin: 0;
padding: 0;}.menu li {
padding: 8px; margin-bottom: 7px;
background-color :#33b5e5; color: #ffffff;  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}.menu li:hover {

background-color: #0099cc;}

Notice that the webpage in the example does not look good when you resize the browser window to a very small width.
In the next chapter you will learn how to fix that.

❮ Previous
Next ❯

More Examples

Example

Specify two rows, where «item1» spans the first two columns in the first two
rows (in a five columns grid layout):

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

Example

Name all items, and make a ready-to-use webpage template:

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

Сокращения определения сетки

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

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

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

Два сокращения (shorthand) для контейнера сетки — это Explicit Grid Shorthand и Grid Definition Shorthand .

Свойство (en-US) задаёт следующие свойства:

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

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

Первое значение — это значение нашей , но мы также объявляем размер строки в конце каждой строки. Это то, что делает .

Затем после у нас есть косая черта, после чего явный список треков столбцов.

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

(en-US)
(en-US)

Свойство также сбрасывает (en-US) свойство на , однако вы не можете указывать пробелы в этой сокращенности.

Вы можете использовать этот синтаксис точно так же, как сокращение (en-US), просто знайте, что при этом вы сбросите другие значения, установленные этим свойством.

Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство .

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic 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

Aligning the grid tracks on the block, or column, axis

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

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

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

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

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения , и . Если мы обновим до , вы увидите как выглядят элементы на нашем пространстве grid:

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

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

repeat() function

We can use repeat() function to repeat grid rows instead of manually defining the rows. There are two arguments in the repeat() function.

First argument of repeat() function may include a positive integer, auto-fill or auto-fit.
The second argument accepts the rows that are repeated.

A positive integer

Positive integer as the first argument represents the number of times the second argument should be repeated.

See the example given below to understand the repeat function.

Example

Try </>

The above given row list is repeated three times.

auto-fill

auto-fill automatically repeats a row list (given as second argument) to fill the grid automatically without overflowing and and the remaining space represents a flexible row i.e. it can contain as many grid items as possible.

Example

Try </>

In the above example, There are total 11 grid lines and 10 rows. The remaining space of 10px (from grid line 10 to 11) represents 10th row and it is flexible only i.e. the content can cause the row height to be greater than 10px.

auto-fit

auto-fit is the same as auto-fill except that it fits content (rows that are currently used by items) within grid starting from the top of the grid without leaving any space.

Example

Try </>

In this case, the remaining space also represents a flexible row only. It can occupy all the space of grid (if available).

Grid terminology #

Grid comes with a bunch of new terminology as it’s the first time CSS has had a real layout system.

Grid lines

A grid is made up of lines, which run horizontally and vertically. If your grid has four columns, it will have five column lines including the one after the last column.

Lines are numbered starting from 1, with the numbering following the writing mode and script direction of the component. This means that column line 1 will be on the left in a left-to-right language such as English, and on the right in a right-to-left language such as Arabic.

Grid tracks

A track is the space between two grid lines. A row track is between two row lines and a column track between two column lines. When we create our grid we create these tracks by assigning a size to them.

Grid cell

A grid cell is the smallest space on a grid defined by the intersection of row and column tracks. It’s just like a table cell or a cell in a spreadsheet. If you define a grid and don’t place any of the items they will automatically be laid out one item into each defined grid cell.

Several grid cells together. Grid areas are created by causing an item to span over multiple tracks.

Gaps

A gutter or alley between tracks. For sizing purposes these act like a regular track. You can’t place content into a gap but you can span grid items across it.

CSS Reference

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

CSS Properties

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

image-rendering
@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
mask-image
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
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
widows
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Property Values

Value	Description	Play it
none	Default value. Columns are created if needed	Play it »
auto	The size of the columns is determined by the size of the container and on the size of the content of the items in the column	Play it »
max-content	Sets the size of each column to depend on the largest item in the column	Play it »
min-content	Sets the size of each column to depend on the smallest item in the column
length	Sets the size of the columns, by using a legal length value. Read about length units	Play it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Выравнивание ячеек внутри колонок и рядов

По умолчанию ячейки тянутся на всю ширину колонки и ряда. За это отвечают свойства для колонок и для рядов. Итак, по умолчанию их значение — то есть растягиваться на всю ширину.

Другие значения свойства:

— ячейка прилипает к началу колонки или ряда

— ячейка прилипает к концу колонки или ряда

— ячейка располагается по центру

Сравним поведение ячеек при использовании различных комбинаций этих свойств и значений. Для этого следует задать сначала задать фиксированные ширины для колонок и для рядов — что бы видеть поведение ячеек при дальнейших манипуляциях.

See the Pen CSS Grid — №9 Выравнивание ячеек by Webcademy.ru online school (@webcademy) on CodePen.dark

Тренируйтесь тут. Попробуйте добавлять больше контента в некоторые ячейки. И не забывайте заглядывать в инспектор (нажатием F12), увидите, что размеры колонок остаются неизменными.

Вид сетки в инспекторе

Вложенные гриды

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

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

В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства (en-US) родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

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-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-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-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic 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

Грид и display: contents

Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, — это взаимодействие между CSS Grid Layout и . Значение свойства display — новое свойство CSS, которое описывается в спецификации следующим образом:

Если вы пишете для элемента , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.

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

Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать с flexbox, чтобы вложенные элементы становились flex-элементами.

UPD: На 04.02.2018 главная проблема с в том, что «редкий браузер долетел до середины Днепра», поддержка у свойства — отсутствует. Следите за обновлениями

Как вы могли увидеть, CSS Grid Layout — это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.