In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.
*
{
box-sizing
:
border-box
;
}
.wrapper
{
border
:
2px solid #f76707
;
border-radius
:
5px
;
background-color
:
#fff4e6
;
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1fr
)
;
grid-template-rows
:
repeat
(
3
,
100px
)
;
}
.wrapper > div
{
border
:
2px solid #ffa94d
;
border-radius
:
5px
;
background-color
:
#ffd8a8
;
padding
:
1em
;
color
:
#d9480f
;
}
<
div
class
=
"
wrapper
"
>
<
div
>
One
</
div
>
<
div
>
Two
</
div
>
<
div
>
Three
</
div
>
<
div
>
Four
</
div
>
<
div
>
Five
</
div
>
</
div
>
.wrapper
{
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1fr
)
;
grid-template-rows
:
100px 100px
;
}
Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the
writing mode
of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right.
Lines are also created in the
implicit grid
when implicit tracks are created to hold content positioned outside of the
explicit grid
, however these lines cannot be addressed by a number.