grid-template-areas property
The grid-template-areas property
specifies a placement of elements in a
grid. First, we give each child element
a name using the
grid-area
property. Then in the parent element we
specify the
grid-template-areas property, in which
we list the names of the child elements in
the order we want them to be placed in
the grid.
Syntax
selector {
grid-template-areas: child elements names;
}
Example
Let's set the position of our elements in the grid:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'second first third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Now let's replace the names of some elements
with the dot '.'. As can be seen from
the result of the executed code, in this case
an empty block will be placed in the scheme:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'first . second third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
See also
-
the
grid-areaproperty
that specifies an element name in a grid