CSS Grid Layout Module Level 2

.four {
grid-row: span 5 / 7;
/*
Ends
in the 7th row,
spans 5 rows up (starting in the 2nd row). */
Note:
Note that grid indexes are
writing mode
relative.
For example, in a right-to-left language like Arabic,
the first column is the rightmost column.
8.1.3.
Named Lines and Spans
Instead of counting lines by number,
lines can be referenced by their
line name
.five {
grid-column: first / middle;
/* Span from line "first" to line "middle". */
Note:
Note that if a
named grid area
has the same name as a
line name
the placement algorithm will prefer to use
named grid area
’s lines instead.
If there are multiple lines of the same name,
they effectively establish a named set of grid lines,
which can be exclusively indexed by filtering the placement by name:
.six {
grid-row: text 5 / text 7;
/* Span between the 5th and 7th lines named "text". */
grid-row: text 5 / span text 2;
/* Same as above - start at the 5th line named "text",
then span across two more "text" lines, to the 7th. */
8.1.4.
Auto Placement
grid item
can be automatically placed into the next available empty
grid cell
growing the
grid
if there’s no space left.
.eight {
grid-area: auto; /* Initial value */
This can be used, for example, to list a number of sale items on a catalog site
in a grid pattern.
Auto-placement can be combined with an explicit span,
if the item should take up more than one cell:
.nine {
grid-area: span 2 / span 3;
/* Auto-placed item, covering two rows and three columns. */
Whether the
auto-placement algorithm
searches across and adds rows,
or searches across and adds columns,
is controlled by the
grid-auto-flow
property.
Note:
By default, the
auto-placement algorithm
looks linearly through the grid without backtracking;
if it has to skip some empty spaces to place a larger item,
it will not return to fill those spaces.
To change this behavior,
specify the
dense
keyword in
grid-auto-flow
8.2.
Grid Item Placement vs. Source Order
“With great power comes great responsibility.”
The abilities of the
grid-placement properties
allow content to be freely arranged and reordered within the
grid
such that the visual presentation can be largely disjoint
from the underlying document source order.
These abilities allow the author great freedom
in tailoring the rendering to different devices
and modes of presentation
e.g. using
media queries
However
they are not a substitute for correct source ordering
Correct source order is important for speech,
for sequential navigation (such as keyboard navigation),
and non-CSS UAs such as search engines, tactile browsers, etc.
Grid placement
only
affects the visual presentation!
This allows authors to optimize the document source for
non-CSS/non-visual interaction modes,
and use grid placement techniques to further manipulate the visual presentation
so as to leave that source order intact.
8.3.
Line-based Placement: the
grid-row-start
grid-column-start
grid-row-end
, and
grid-column-end
properties
Name:
grid-row-start
grid-column-start
grid-row-end
grid-column-end
Value:

Initial:
auto
Applies to:
grid items
and absolutely-positioned boxes whose containing block is a
grid container
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword, identifier, and/or integer
Canonical order:
per grammar
Animation type:
discrete

auto

[ [


&&

[ span
&&

||

] ]
The
grid-row-start
grid-column-start
grid-row-end
, and
grid-column-end
properties
determine a
grid item
’s size and location within the
grid
by contributing a line, a span, or nothing (automatic)
to its
grid placement
thereby specifying the
inline-start
block-start
inline-end
, and
block-end
edges of its
grid area
Values have the following meanings:

First attempt to match the
grid area
’s edge to a
named grid area
if there is a
grid line
whose
line name
is

-start
(for
grid-*-start
) /

-end
(for
grid-*-end
),
contributes the first such line to the
grid item
’s
placement
Note:
Named grid areas
automatically generate
implicitly-assigned line names
of this form,
so specifying
grid-row-start: foo
will choose the start edge of that
named grid area
(unless another line named
foo-start
was explicitly specified before it).
Otherwise,
treat this as if the integer
had been specified along with the



] &&

Contributes the
th
grid line
to the
grid item
’s
placement
If a negative integer is given,
it instead counts in reverse,
starting from the end edge of the
explicit grid
If a name is given as a

only lines with that name are counted.
If not enough lines with that name exist,
all
implicit grid lines
are assumed to have that name for the purpose of finding this position.
An

value of zero makes the declaration invalid.
span && [

||

Contributes a
grid span
to the
grid item
’s
placement
such that the corresponding edge of the
grid item
’s
grid area
is
lines from its opposite edge
in the corresponding direction.
For example,
grid-column-end: span 2
indicates the second grid line in the endward direction
from the
grid-column-start
line.
If a name is given as a

only lines with that name are counted.
If not enough lines with that name exist,
all
implicit grid lines
on the side of the
explicit grid
corresponding to the search direction
are assumed to have that name for the purpose of counting this span.
For example, given the following declarations:
.grid
grid-template-columns
100
px
.griditem
grid-column
span foo /
The
grid container
has an
explicit grid
with two grid lines,
numbered 1 and 2.
The
grid item’s
column-end edge is specified to be at line 4,
so two lines are generated in the endward side of the
implicit grid
Its column-start edge must be the first "foo" line it can find startward of that.
There is no "foo" line in the grid, though,
so the only possibility is a line in the
implicit grid
Line 3 is not a candidate, because it’s on the endward side of the
explicit grid
while the
grid-column-start
span forces it to search startward.
So, the only option is for the
implicit grid
to generate a line on the startward side of the
explicit grid
An illustration of the result.
If the

is omitted, it defaults to
Negative integers or zero are invalid.
auto
The property contributes nothing to the
grid item
’s
placement
indicating
auto-placement
or a default span of one.
(See
§ 8 Placing Grid Items
, above.)
In all the above productions,
the

additionally excludes the keywords
span
and
auto
Given a single-row, 8-column grid and the following 9 named lines:
1 2 3 4 5 6 7 8 9
+--+--+--+--+--+--+--+--+
| | | | | | | | |
A B C A B C A B C
| | | | | | | | |
+--+--+--+--+--+--+--+--+
The following declarations place the grid item between the lines indicated by index:
grid-column-start: 4; grid-column-end: auto;
/* Line 4 to line 5 */

grid-column-start: auto; grid-column-end: 6;
/* Line 5 to line 6 */

grid-column-start: C; grid-column-end: C -1;
/* Line 3 to line 9 */

grid-column-start: C; grid-column-end: span C;
/* Line 3 to line 6 */

grid-column-start: span C; grid-column-end: C -1;
/* Line 6 to line 9 */

grid-column-start: span C; grid-column-end: span C;
/* Error: The end span is ignored, and an auto-placed
item can't span to a named line.
Equivalent to ''grid-column: span 1;''. */

grid-column-start: 5; grid-column-end: C -1;
/* Line 5 to line 9 */

grid-column-start: 5; grid-column-end: span C;
/* Line 5 to line 6 */

grid-column-start: 8; grid-column-end: 8;
/* Error: line 8 to line 9 */

grid-column-start: B 2; grid-column-end: span 1;
/* Line 5 to line 6 */
8.3.1.
Grid Placement Conflict Handling
If the
placement
for a
grid item
contains two lines,
and the
start
line is further end-ward than the
end
line,
swap the two lines.
If the
start
line is
equal
to the
end
line,
remove the
end
line.
If the
placement
contains two spans,
remove the one contributed by the
end
grid-placement property
If the
placement
contains only a span for a named line,
replace it with a span of 1.
8.4.
Placement Shorthands: the
grid-column
grid-row
, and
grid-area
properties
Name:
grid-row
grid-column
Value:

[ /

Initial:
auto
Applies to:
grid items
and absolutely-positioned boxes whose containing block is a
grid container
Inherited:
no
Percentages:
N/A
Computed value:
see individual properties
Animation type:
discrete
Canonical order:
per grammar
The
grid-row
and
grid-column
properties are shorthands for
grid-row-start
grid-row-end
and
grid-column-start
grid-column-end
, respectively.
If two

values are specified,
the
grid-row-start
grid-column-start
longhand is set to the value before the slash,
and the
grid-row-end
grid-column-end
longhand is set to the value after the slash.
When the second value is omitted,
if the first value is a

the
grid-row-end
grid-column-end
longhand is also set to that

otherwise, it is set to
auto
Name:
grid-area
Value:

[ /

{0,3}
Initial:
auto
Applies to:
grid items
and absolutely-positioned boxes whose containing block is a
grid container
Inherited:
no
Percentages:
N/A
Computed value:
see individual properties
Animation type:
discrete
Canonical order:
per grammar
The
grid-area
property is a
shorthand
for
grid-row-start
grid-column-start
grid-row-end
and
grid-column-end
If four

values are specified,
grid-row-start
is set to the first value,
grid-column-start
is set to the second value,
grid-row-end
is set to the third value,
and
grid-column-end
is set to the fourth value.
When
grid-column-end
is omitted,
if
grid-column-start
is a

grid-column-end
is set to that

otherwise, it is set to
auto
When
grid-row-end
is omitted,
if
grid-row-start
is a

grid-row-end
is set to that

otherwise, it is set to
auto
When
grid-column-start
is omitted,
if
grid-row-start
is a

all four longhands are set to that value.
Otherwise, it is set to
auto
Note:
The resolution order for this shorthand is row-start/column-start/row-end/column-end,
which goes
CCW
for
LTR
pages,
the opposite direction of the related 4-edge properties using physical directions, like
margin
8.5.
Grid Item Placement Algorithm
The following
grid item placement algorithm
resolves
automatic positions
of
grid items
into
definite positions
ensuring that every
grid item
has a well-defined
grid area
to lay out into.
Grid spans
need no special resolution;
if they’re not explicitly specified,
they default to 1.)
Note:
This algorithm can result in the creation of new rows or columns in the
implicit grid
if there is no room in the
explicit grid
to place an auto-positioned
grid item
Every
grid cell
(in both the
explicit
and
implicit grids
can be
occupied
or
unoccupied
A cell is
occupied
if it’s covered by the
grid area
of a
grid item
with a
definite grid position
otherwise,
the cell is
unoccupied
A cell’s
occupied
unoccupied
status can change during this algorithm.
To aid in clarity,
this algorithm is written with the assumption that
grid-auto-flow
has
row
specified.
If it is instead set to
column
swap all mentions of rows and columns, inline and block, etc. in this algorithm.
Note:
The
auto-placement algorithm
works with the
grid items
in
order-modified document order
not their original document order.
Generate anonymous grid items
as described in
§ 6 Grid Items
(Anonymous
grid items
are always auto-placed,
since their boxes can’t have any
grid-placement properties
specified.)
Position anything that’s not auto-positioned.
Process the items locked to a given row.
For each
grid item
with a
definite row position
(that is, the
grid-row-start
and
grid-row-end
properties define a
definite grid position
),
in
order-modified document order
“sparse” packing (default behavior)
Set the column-start line of its
placement
to the earliest (smallest positive index) line index
that ensures this item’s
grid area
will not overlap any
occupied
grid cells
and that is past any
grid items
previously placed in this row by this step.
“dense” packing (
dense
specified)
Set the column-start line of its
placement
to the earliest (smallest positive index) line index
that ensures this item’s
grid area
will not overlap any
occupied
grid cells.
Determine the columns in the implicit grid.
Create columns in the
implicit grid
Start with the columns from the
explicit grid
Among all the items with a
definite column position
(explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column)
add columns to the beginning and end of the
implicit grid
as necessary to accommodate those items.
If the largest
column span
among all the items
without
definite column position
is larger than the width of the
implicit grid
add columns to the end of the
implicit grid
to accommodate that
column span
For example, in the following style fragment:
#grid {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-auto-flow: row;
#grid-item {
grid-column: 4 / span 3;
The number of columns needed is 6.
The
explicit grid
provides 5 columns
(from
grid-template-columns
with lines number 1 through 6,
but
#grid-item
’s column position means it ends on line 7,
which requires an additional column added to the end of the
implicit grid
Position the remaining grid items.
The
auto-placement cursor
defines the current “insertion point” in the grid,
specified as a pair of row and column
grid lines
Initially the
auto-placement cursor
is set to the start-most row and column lines in the
implicit grid
The
grid-auto-flow
value in use determines how to position the items:
“sparse” packing (default behavior)
For each
grid item
that hasn’t been positioned by the previous steps,
in
order-modified document order
If the item has a
definite column position
Set the column position of the
cursor
to the
grid item’s
column-start line.
If this is less than the previous column position of the
cursor
increment the row position by 1.
Increment the
cursor
’s row position until a value is found
where the
grid item
does not overlap any
occupied
grid cells
(creating new rows in the
implicit grid
as necessary).
Set the item’s row-start line to the
cursor’s
row position,
and set the item’s row-end line according to its span from that position.
If the item has an
automatic grid position
in both axes:
Increment the column position of the
auto-placement cursor
until either this item’s
grid area
does not overlap any
occupied
grid cells,
or the
cursor’s
column position,
plus the item’s column span,
overflow the number of columns in the implicit grid,
as determined earlier in this algorithm.
If a non-overlapping position was found in the previous step,
set the item’s row-start and column-start lines to the
cursor’s
position.
Otherwise,
increment the
auto-placement cursor
’s row position
(creating new rows in the
implicit grid
as necessary),
set its column position to the start-most column line in the
implicit grid
and return to the previous step.
“dense” packing (
dense
specified)
For each
grid item
that hasn’t been positioned by the previous steps,
in
order-modified document order
If the item has a
definite column position
Set the row position of the cursor to the start-most row line in the
implicit grid
Set the column position of the cursor to the
grid item’s
column-start line.
Increment the
auto-placement cursor
’s row position until a value is found
where the
grid item
does not overlap any
occupied
grid cells
(creating new rows in the
implicit grid
as necessary).
Set the item’s row-start line index to the
cursor’s
row position.
(Implicitly setting the item’s row-end line according to its span, as well.)
If the item has an
automatic grid position
in both axes:
Set the cursor’s row and column positions to start-most row and column lines in the
implicit grid
Increment the column position of the
auto-placement cursor
until either this item’s
grid area
does not overlap any
occupied
grid cells,
or the
cursor’s
column position,
plus the item’s column span,
overflow the number of columns in the implicit grid,
as determined earlier in this algorithm.
If a non-overlapping position was found in the previous step,
set the item’s row-start and column-start lines to the
cursor’s
position.
Otherwise,
increment the
auto-placement cursor
’s row position
(creating new rows in the
implicit grid
as necessary),
reset its column position to the start-most column line in the
implicit grid
and return to the previous step.
9.
Subgrids
subgrid
behaves just like a normal
grid container
except that:
Placing the
subgrid
creates a correspondence between its
subgridded
tracks
and those that it spans in its
parent grid
The grid lines thus shared between the
subgrid
and its parent
form the subgrid’s
explicit grid
and its track sizes are governed by the
parent grid
The number of explicit tracks in the
subgrid
in a
subgridded
dimension
always corresponds to the number of
grid tracks
that it spans in its parent
grid
If the
subgrid
’s
grid span
in the subgridded dimension is
explicit
or
implicit
then the number of explicit tracks in each subgridded dimension
is taken from its used
grid span
in that dimension
(regardless of its
grid-template-*
properties).
If it has an
automatic grid span
then its used
grid span
is taken
from the number of explicit tracks specified for that axis
by its
grid-template-*
properties,
floored at one.
Note:
The explicit grid determined here can be further truncated
if the placement of the
subgrid
is clamped by its parent grid.
See
the "no implicit tracks" bullet point
If the
grid-template-*
properties specify a

in a
subgridded axis
the used value is truncated
to match the used number of explicit tracks.
The
grid-placement properties
of the
subgrid
’s
grid items
and the line numbers they use
are scoped to the lines covered by the
subgrid
exactly consistent with the lines outside the
subgrid
being excluded from its
explicit grid
E.g. numeric indices count starting from the first line of the
subgrid
rather than the first line of the
parent grid
Line numbering and placement rules
obey the
subgrid
’s own
writing mode
just as they would for a nested independent grid.
Since
subgrids
can be placed before their contents are placed,
the
subgridded
lines
automatically receive the
explicitly-assigned line names
specified on the corresponding lines of the parent
grid
These names are in
addition
to
any
line names
specified locally on the
subgrid
When a
subgrid
overlaps a
named grid area
in its parent
that was created by a
grid-template-areas
property declaration,
implicitly-assigned line names
are assigned
to represent the parent’s
named grid area
within the
subgrid
Note:
If a
named grid area
only partially overlaps the
subgrid
its
implicitly-assigned line names
will be assigned
to the first and/or last line of the
subgrid
such that a
named grid area
exists
representing that partially overlapped area of the
subgrid
thus the
line name
assignments of the
subgrid
might not always correspond exactly
to the
line name
assignments of the parent
grid
These names are also in
addition
to
any
line names
specified locally on the
subgrid
In the following example,
the 4-column grand-parent grid has both explicit line names
and implicit ones generated by
grid-template-areas

.abspos {
grid-row-start: 1; /* 1st grid row line = top of grid container */
grid-row-end: span 2; /* 3rd grid row line */
grid-column-start: 3; /* 3rd grid col line */
grid-column-end: auto; /* right padding edge */
/*
Containing block
covers the top right quadrant of the
grid container
*/

position: absolute;
top: 70px;
bottom: 40px;
left: 100px;
right: 30px;
Note:
Grids and the
grid-placement properties
are
flow-relative
while the offset properties (
left
right
top
, and
bottom
) are
physical
so if the
direction
or
writing-mode
properties change,
the grid will transform to match,
but the offsets won’t.
Instead of auto-placement, an
auto
value for a
grid-placement property
contributes a special line to the
placement
whose position is that of the corresponding padding edge of the
grid container
(the padding edge of the scrollable area, if the
grid container
overflows).
These lines become the first and last lines (0th and -0th) of the
augmented grid
used for positioning absolutely-positioned items.
Note:
Thus, by default, the absolutely-positioned box’s
containing block
will correspond
to the padding edges of the
grid container
, as it does for
block containers
Absolute positioning occurs after layout of the
grid
and its
in-flow
contents,
and does not contribute to the sizing of any grid tracks
or affect the size/configuration of the grid in any way.
If a
grid-placement property
refers to a non-existent line
either by explicitly specifying such a line or by spanning outside of the existing
implicit grid
it is instead treated as specifying
auto
(instead of creating new
implicit grid lines
).
Note:
Remember that implicit lines are assumed to have all line names,
so a referenced line might exist even though it is not explicitly named.
If the
placement
only contains a
grid span
replace it with the two
auto
lines in that axis.
(This happens when both
grid-placement properties
in an axis contributed a span originally,
and
§ 8.3.1 Grid Placement Conflict Handling
caused the second span to be ignored.)
10.2.
With a Grid Container as Parent
An absolutely-positioned child of a
grid container
is
out-of-flow
and not a
grid item
and so does not affect the placement of other items
or the sizing of the grid.
The
static position
[CSS2]
of an absolutely-positioned child of a
grid container
is determined as if it were the sole grid item
in a
grid area
whose edges coincide with the content edges of the
grid container
Note:
Note that this position is affected by the values of
justify-self
and
align-self
on the child,
and that, as in most other layout models,
the absolutely-positioned child has no effect on the size of the containing block
or layout of its contents.
11.
Alignment and Spacing
After a
grid container
’s
grid tracks
have been sized,
and the dimensions of all
grid items
are finalized,
grid items
can be aligned within their
grid areas
Note:
The
grid items
of
subgrids
participate in alignment,
including
baseline alignment
together with their
parent grid
’s items;
see
Subgrids (h)
The
margin
properties can be used to align items in a manner similar to
what margins can do in block layout.
Grid items
also respect the
box alignment properties
from the
CSS Box Alignment Module
[CSS-ALIGN-3]
which allow easy keyword-based alignment of items in both the rows and columns.
By default,
grid items
stretch to fill their
grid area
However, if
justify-self
or
align-self
compute to a value other than
stretch
or margins are
auto
grid items
will auto-size to fit their contents.
11.1.
Gutters: the
row-gap
column-gap
, and
gap
properties
The
row-gap
and
column-gap
properties
(and their
gap
shorthand),
when specified on a
grid container
define the
gutters
between
grid rows
and
grid columns
Their syntax is defined in
CSS Box Alignment 3
§ 8 Gaps Between Boxes
The effect of these properties
is as though the affected
grid lines
acquired thickness:
the
grid track
between two
grid lines
is the space between the
gutters
that represent them.
For the purpose of
track sizing
each
gutter
is treated as
an extra, empty, fixed-size track of the specified size,
which is spanned by any
grid items
that span across its corresponding
grid line
Note:
Additional spacing may be added between tracks
due to
justify-content
align-content
See
§ 12.1 Grid Sizing Algorithm
This space effectively increases the size of the
gutters
If a
grid
is
fragmented
between tracks,
the
gutter
spacing between those tracks must be suppressed.
Note that gutters are suppressed even after forced breaks,
unlike margins
Gutters
only appear
between
tracks of the
implicit grid
there is no gutter before the first track or after the last track.
(In particular, there is no
gutter
between the first/last track of the
implicit grid
and the “auto” lines in the
augmented grid
.)
When a
collapsed track
’s gutters
collapse
they coincide exactly—​the two gutters overlap so that their start and end edges coincide.
If one side of a
collapsed
track does not have a gutter
(e.g. if it is the first or last track of the
implicit grid
),
then collapsing its gutters results in no gutter
on either “side” of the
collapsed track
11.2.
Aligning with
auto
margins
Auto
margins
on
grid items
have an effect
very similar to auto margins in
block layout
During calculations of
grid track
sizes,
auto
margins are treated as
As defined for the
inline axis
of
block layout
(see
CSS2§10.3.3
),
auto
margins in either axis absorb positive free space
prior to alignment via the
box alignment properties
thereby disabling the effects of any
self-alignment properties
in that axis.
Overflowing
grid items
resolve their
auto
margins to zero
and overflow as specified by their
box alignment properties
11.3.
Inline-axis Alignment: the
justify-self
and
justify-items
properties
Grid items
can be aligned in the inline dimension
by using the
justify-self
property on the
grid item
or
justify-items
property on the
grid container
as defined in
[CSS-ALIGN-3]
For example,
for an English document,
the inline axis is horizontal,
and so the
justify-*
properties align the
grid items
horizontally.
If
baseline alignment
is specified on a
grid item
whose size in that axis depends on the size of an intrinsically-sized track
(whose size is therefore dependent on both the item’s size and baseline alignment,
creating a cyclic dependency),
that item does not participate in baseline alignment,
and instead uses its
fallback alignment
as if that were originally specified.
For this purpose,

track sizes count as “intrinsically-sized”
when the
grid container
has an
indefinite
size in the relevant axis.
Note:
Whether the fallback alignment is used or not
does not change over the course of layout:
if a cycle exists, it exists.
11.4.
Block-axis Alignment: the
align-self
and
align-items
properties
Grid items
can also be aligned in the block dimension
(perpendicular to the inline dimension)
by using the
align-self
property on the
grid item
or
align-items
property on the
grid container
as defined in
[CSS-ALIGN-3]
If
baseline alignment
is specified on a
grid item
whose size in that axis depends on the size of an intrinsically-sized track
(whose size is therefore dependent on both the item’s size and baseline alignment,
creating a cyclic dependency),
that item does not participate in baseline alignment,
and instead uses its
fallback alignment
as if that were originally specified.
For this purpose,

track sizes count as “intrinsically-sized”
when the
grid container
has an
indefinite
size in the relevant axis.
11.5.
Aligning the Grid: the
justify-content
and
align-content
properties
If the
grid
’s outer edges do not correspond to the
grid container
’s content edges
(for example, if no columns are flex-sized),
the
grid tracks
are aligned within the content box according to the
justify-content
and
align-content
properties on the
grid container
For example, the following grid is centered vertically,
and aligned to the right edge of its
grid container
.grid {
display: grid;
grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
justify-content: end;
align-content: center;
min-height: 60rem;
If there are no
grid tracks
(the
explicit grid
is empty, and no tracks were created in the
implicit grid
),
the sole
grid line
in each axis is aligned with the start edge of the
grid container
Note that certain values of
justify-content
and
align-content
can cause the tracks to be spaced apart
space-around
space-between
space-evenly
or to be resized (
stretch
).
If the
grid
is
fragmented
between tracks,
any such additional spacing between those tracks must be suppressed.
For example, in the following grid,
the spanning item’s grid area is increased to accommodate
the extra space assigned to the gutters due to alignment:
.wrapper {
display: grid;
/* 3-row / 4-column grid container */
grid: repeat(3, auto) / repeat(4, auto);
gap: 10px;
align-content: space-around;
justify-content: space-between;

.item1 { grid-column: 1 / 5; }
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
/* last two items auto-place into the last two grid cells */
Grid before alignment
Grid after alignment
Note that alignment (unlike
gap
spacing)
happens after the grid tracks are sized,
so if the track sizes are determined by the contents of the spanned item,
it will gain excess space in the alignment stage
to accommodate the alignment spacing.
11.6.
Grid Container Baselines
The first (last) baselines of a
grid container
are determined as follows:
Find the first (last) row of the
grid container
containing at least one
grid item
If any of the
grid items
intersecting this row
participate in
baseline alignment
in that row,
the grid container’s
baseline set
is
generated
from
the shared
alignment baseline
of those
grid items
Otherwise,
the grid container’s first (last) baseline set
is
generated
from
the
alignment baseline
of the first (last)
grid item
in row-major
grid order
(according to the
writing mode
of the
grid container
).
If the
grid item
has no
alignment baseline
in the grid’s inline axis,
then one is first
synthesized
from its border edges.
If the
grid container
does not contain any
grid items
the grid container has no first (last)
baseline set
and one is
synthesized
if needed
according to the rules of its
alignment context
Exit from this algorithm.
Grid-modified document order (grid order)
is the order in which
grid items
are encountered
when traversing the grid’s
grid cells
If two items are encountered at the same time,
they are taken in
order-modified document order
When calculating the baseline according to the above rules,
if the box contributing a baseline has an
overflow
value that allows scrolling,
the box must be treated as being in its initial scroll position
for the purpose of determining its baseline.
When
determining the baseline of a table cell
a grid container provides a baseline just as a line box or table-row does.
[CSS2]
See
CSS Writing Modes 3
§ 4.1 Introduction to Baselines
and
CSS Box Alignment 3
§ 9 Baseline Alignment Details
for more information on baselines.
12.
Grid Layout Algorithm
This section defines the
grid layout algorithm
which sizes the
grid container
sizes and positions all the
grid tracks
and lays out the
grid items
which have been
placed
into its
grid areas
Run the
Grid Item Placement Algorithm
to resolve the placement of all
grid items
(including
subgrids
and their sub-items)
in the
grid
Find the size of the
grid container
per
§ 5.2 Sizing Grid Containers
Note:
During this phase,
cyclic

s in track sizes are treated as
auto
Given the resulting
grid container
size,
run the
Grid Sizing Algorithm
to size the
grid
Note:
During this phase,

s in track sizes are resolved
against the
grid container
size.
Lay out the
grid items
into their respective containing blocks.
Each
grid area’s
width and height
are considered
definite
for this purpose.
Note:
Since formulas calculated using only definite sizes,
such as the
stretch fit
formula,
are also definite,
the size of a grid item which is stretched
is also considered definite.
12.1.
Grid Sizing Algorithm
This section defines the
grid sizing algorithm
which determines the size of all
grid tracks
and, by extension, the entire grid.
Each track has specified
minimum
and
maximum
sizing functions
(which may be the same).
Each
sizing function
is either:
fixed sizing function

or resolvable

).
An
intrinsic sizing function
min-content
max-content
auto
fit-content()
).
flexible sizing function

).
The
grid sizing algorithm
defines how to resolve these sizing constraints into used track sizes.
First, the
track sizing algorithm
is used to resolve the sizes of the
grid columns
In this process,
any
grid item
which is subgridded
in the
grid container
’s
inline axis
is treated as empty
and its
grid items
(the grandchildren)
are treated as direct children of the
grid container
(their grandparent).
This introspection is recursive.
Items which are subgridded only in the
block axis
and whose
grid container
size in the
inline axis
depends on the size of its contents
are also introspected:
since the size of the item in this dimension
can be dependent on the sizing of its subgridded tracks in the other,
the size contribution of any such item to this grid’s column sizing
(see
Resolve Intrinsic Track Sizes
is taken under the provision
of having determined its track sizing only up to the same point
in the Grid Sizing Algorithm as this itself.
E.g. for the first pass through this step,
the item will have its tracks sized only through this first step;
if a second pass of this step is triggered then
the item will have completed a first pass through steps 1-3
as well as the second pass of this step
prior to returning its size for consideration in this grid’s column sizing.
Again, this introspection is recursive.
If calculating the layout of a
grid item
in this step
depends on the
available space
in the
block axis
assume the
available space
that it would have
if any row with a
definite
max track sizing function
had that size and all other rows were infinite.
If both the
grid container
and all tracks have
definite
sizes,
also apply
align-content
to find the final effective size
of any gaps spanned by such items;
otherwise ignore the effects of track alignment in this estimation.
Next, the
track sizing algorithm
resolves the sizes of the
grid rows
In this process,
any
grid item
which is subgridded
in the
grid container
’s
block axis
is treated as empty
and its
grid items
(the grandchildren)
are treated as direct children of the
grid container
(their grandparent).
This introspection is recursive.
As with sizing columns,
items which are subgridded only in the
inline axis
and whose
grid container
size in the
block axis
depends on the size of its contents
are also introspected.
(As with sizing columns,
the size contribution to this grid’s row sizing
is taken under the provision
of having determined its track sizing
only up to this corresponding point in the algorithm;
and again, this introspection is recursive.)
To find the
inline-axis
available space
for any items whose
block-axis
size contributions require it,
use the
grid column
sizes calculated in the previous step.
If the
grid container
’s
inline size
is
definite
also apply
justify-content
to account for the effective column gap sizes.
Then, if the
min-content contribution
of any grid item has changed
based on the row sizes and alignment calculated in step 2,
re-resolve the sizes of the
grid columns
with the new
min-content
and
max-content contributions
(once only).
To find the
block-axis
available space
for any items whose
inline-axis
size contributions require it,
use the
grid row
sizes calculated in the previous step.
If the
grid container
’s
block size
is
definite
also apply
align-content
to account for the effective row gap sizes.
This repetition is necessary for cases where the
inline size
of a
grid item
depends on the
block size
of its
grid area
Examples include wrapped column
flex containers
flex-flow: column wrap
),
orthogonal flows
writing-mode
),
multi-column containers
and items with an aspect-ratio (or with a child with an aspect ratio)
whose size depends on the size of the row.
Next, if the
min-content contribution
of any grid item has changed
based on the column sizes and alignment calculated in step 3,
re-resolve the sizes of the
grid rows
with the new
min-content
and
max-content contributions
(once only).
To find the
inline-axis
available space
for any items whose
block-axis
size contributions require it,
use the
grid column
sizes calculated in the previous step.
If the
grid container
’s
inline size
is
definite
also apply
justify-content
to account for the effective column gap sizes.
Finally, align the tracks within the
grid container
according to the
align-content
and
justify-content
properties.
Note:
This can introduce extra space between tracks,
potentially enlarging the grid area of any grid items spanning the gaps
beyond the space allotted to during track sizing.
Note:
Track sizing in a
subgridded
dimension
treats each item in a given track in that axis
as members of the
parent grid
This interlacing requires that grid sizing
drill down per axis into
subgrids
rather than completing both axes as it recurses.
Note this means that a
subgrid
establishing an
orthogonal flow
would have the order of its track sizing inverted compared to a nested grid.
The following example illustrates how per-axis subgrids are sized:
Suppose we have a parent grid container
which contains an item
that has subgridded columns
and contains a grandchild
that has subgridded rows
and grandchild
that is simply a nested grid.






When
sizes its columns
it treats
’s items
as slotted into to
’s corresponding columns,
but when
sizes its rows
it treats
as a single item
(a grid container with its own rows and some items including items
and
).
Similarly when
sizes its rows,
it treats
’s items as slotted into
’s rows,
but when
sizes its columns,
it treats
as a single item,
just as it does with
There is no relationship between
’s rows and
’s rows,
because the rows in
are nested, not subgridded.
At a high level, the grid algorithm is:
Size the columns
Size the rows
Adjust the columns (if needed based on final row sizes)
The grid sizing algorithm in this example would thus look like this:
Resolve sizes of
’s grid columns,
using the sizes of
’s grid items,
treating
as empty
but treating its children
(including
and
as items in grid
The grid algorithm simply recurses into
For
, it’s more complicated:
Size
’s columns.
Size
’s rows by sizing
’s rows.
Adjust
’s columns.
Return
’s final column sizes.
A correct size for
’s rows
requires
’s final column sizes,
because the row size depends on the column size,
and thus
’s rows could very well depend
on
’s final column sizes.
To break this cyclic dependency,
we need to split the algorithm to depend on
the initial approximation of
’s final column sizes,
and do the adjustment pass later.
So for
, we need to recurse into column sizing only,
and pass that initial size up to
for its initial column sizing.
When we size
’s rows later on,
we will size
’s rows (which are subgridded),
and finish up
’s sizing by finalizing its columns.
If this resulted in a change, we have the opportunity
to trigger an adjustment pass for
’s columns
during its adjustment pass.
Next, resolve sizes of
’s rows,
using the sizes of
’s grid items,
treating
as a single item.
Since
, as a subgrid,
has its sizing is split out into the multiple passes,
the grid algorithm issues only a row-sizing recursion into
Size
’s rows, treating D as a single item, requesting its final size,
and treating
as an empty item
and hoisting its children as items into grid
returns its final row size,
which factors into
’s row sizing pass.
Last, finalize
’s column sizes.
If
’s final size changes
as a result of the row-sizing pass through
this should trigger a resizing of
’s columns,
which should trigger a resizing pass on
’s column.
12.2.
Track Sizing Terminology
min track sizing function
If the track was sized with a
minmax()
function,
this is the first argument to that function.
If the track was sized with a

value or
fit-content()
function,
auto
Otherwise, the track’s sizing function.
max track sizing function
If the track was sized with a
minmax()
function,
this is the second argument to that function.
Otherwise, the track’s sizing function.
In all cases, treat
auto
and
fit-content()
as
max-content
except where specified otherwise for
fit-content()
available grid space
Independently in each dimension, the
available grid space
is:
If the
grid container’s
size is definite,
then use the size of its content box.
If the
grid container
is being sized under
min-content constraint
or
max-content constraint
then the
available grid space
is that constraint
(and is indefinite).
Note:
auto
sizes that indicate content-based sizing
(e.g. the height of a block-level box in horizontal writing modes)
are equivalent to
max-content
In all cases, clamp the
available grid space
according to the
grid container’s
min/max-width/height properties,
if they are definite.
free space
Equal to the
available grid space
minus
the sum of the
base sizes
of all the grid tracks (including gutters),
floored at zero.
If
available grid space
is
indefinite
the
free space
is
indefinite
as well.
span count
The number of
grid tracks
crossed by a
grid item
in the applicable dimension.
Note:
Remember that
gutters
are treated as fixed-size tracks—​tracks with their min and max sizing functions both set to the gutter’s used size—​for the purpose of the grid sizing algorithm.
Their widths need to be incorporated into
the
track sizing algorithm
’s calculations accordingly.
12.3.
Track Sizing Algorithm
The remainder of this section is the
track sizing algorithm
which calculates from the
min
and
max track sizing functions
the used track size.
Each track has a
base size

which grows throughout the algorithm
and which will eventually be the track’s final size,
and a
growth limit

which provides a desired maximum size for the
base size
There are 5 steps:
Initialize Track Sizes
Resolve Intrinsic Track Sizes
Maximize Tracks
Expand Flexible Tracks
Expand Stretched
auto
Tracks
12.4.
Initialize Track Sizes
Initialize each track’s base size and growth limit.
For each track,
if the track’s
min track sizing function
is:
fixed sizing function
Resolve to an absolute length and use that size as the track’s initial
base size
Note:
Indefinite
lengths cannot occur,
as they’re treated as
auto
An
intrinsic sizing function
Use an initial
base size
of zero.
For each track,
if the track’s
max track sizing function
is:
fixed sizing function
Resolve to an absolute length and use that size as the track’s initial
growth limit
An
intrinsic sizing function
flexible sizing function
Use an initial
growth limit
of infinity.
In all cases, if the
growth limit
is less than the
base size
increase the
growth limit
to match the
base size
Note:
Gutters
are treated as empty fixed-size tracks for the purpose of the
track sizing algorithm
12.5.
Resolve Intrinsic Track Sizes
This step resolves intrinsic track
sizing functions
to absolute lengths.
First it resolves those sizes based on items that are contained wholly within a single track.
Then it gradually adds in the space requirements of items that span multiple tracks,
evenly distributing the extra space across those tracks
insofar as possible.
Note:
When this step is complete,
all intrinsic
base sizes
and
growth limits
will have been resolved to absolute lengths.
Note:
Remember that
fit-content()
and
auto
max track sizing functions
are treated the same as
max-content
except where explicitly specified otherwise.
Shim baseline-aligned items
so their intrinsic size contributions reflect their baseline alignment.
For the items in each
baseline-sharing group
add a “shim” (effectively, additional margin)
on the start/end side (for first/last-baseline alignment)
of each item
so that,
when start/end-aligned together
their
baselines align as specified
Consider these “shims” as part of the items’ intrinsic size contribution
for the purpose of track sizing, below.
If an item uses multiple intrinsic size contributions,
it can have different shims for each one.
For example, when the
grid container
has an
indefinite
size,
it is first laid out under min/max-content constraints to find the size,
then laid out "for real" with that size
(which can affect things like percentage tracks).
The "shims" added for each phase are independent,
and only affect the layout during that phase.
Note:
Note that both
baseline self-aligned
and
baseline content-aligned
items
are considered in this step.
Note:
Since
grid items
whose own size
depends on the size of an intrinsically-sized track
do not participate in baseline alignment
they are not shimmed.
Size tracks to fit non-spanning items:
For each track with an intrinsic
track sizing function
and not a
flexible sizing function
consider the items in it with a span of 1:
For min-content minimums:
If the track has a
min-content
min track sizing function
set its
base size
to the maximum of the items’
min-content contributions
floored at zero.
For max-content minimums:
If the track has a
max-content
min track sizing function
set its
base size
to the maximum of the items’
max-content contributions
floored at zero.
For auto minimums:
If the track has an
auto
min track sizing function
and the
grid container
is being sized
under a
min-
max-content constraint
set the track’s
base size
to the maximum of its items’
limited min-content contributions
floored at zero.
The
limited min-/max-content contribution
of an item
is (for this purpose) its
min-
max-content contribution
(accordingly),
limited by the
max track sizing function
(which could be the argument to a
fit-content()
track sizing function)
if that is
fixed
and ultimately floored by its
minimum contribution
(defined below).
Otherwise,
set the track’s
base size
to the maximum of its items’
minimum contributions
floored at zero.
The
minimum contribution
of an item
is the smallest
outer size
it can have.
Specifically,
if the item’s computed
preferred size
behaves as auto
or depends on the size of its
containing block
in the relevant axis,
its
minimum contribution
is
the
outer size
that would result from assuming
the item’s used
minimum size
as its
preferred size
else the item’s
minimum contribution
is
its
min-content contribution
Because the
minimum contribution
often depends
on the size of the item’s content,
it is considered a type of
intrinsic size contribution
Note:
For items with a specified minimum size of
auto
(the initial value),
the
minimum contribution
is usually equivalent to
the
min-content contribution
—​but can differ in some cases, see
§ 6.6 Automatic Minimum Size of Grid Items
Also,
minimum contribution
min-content contribution
max-content contribution
For min-content maximums:
If the track has a
min-content
max track sizing function
set its
growth limit
to the maximum of the items’
min-content contributions
For max-content maximums:
If the track has a
max-content
max track sizing function
set its
growth limit
to the maximum of the items’
max-content contributions
For
fit-content()
maximums,
furthermore clamp this
growth limit
by the
fit-content()
argument.
In all cases, if a track’s
growth limit
is now less than its
base size
increase the
growth limit
to match the
base size
Note:
This step is a simplification of the steps below for handling spanning items,
and should yield the same behavior as running those instructions
on items with a span of 1.
Increase sizes to accommodate spanning items crossing content-sized tracks:
Next, consider the items with a span of 2
that do not span a track with a
flexible sizing function
For intrinsic minimums:
First
distribute extra space
to
base sizes
of tracks with
an
intrinsic
min track sizing function
to accommodate these items’
minimum contributions
If the grid container is being sized under a
min-
or
max-content constraint
use the items’
limited min-content contributions
in place of their
minimum contributions
here.
(For an item spanning multiple tracks,
the upper limit used to calculate
its
limited min-/max-content contribution
is the
sum
of the
fixed
max track sizing functions
of any tracks it spans,
and is applied if it only spans such tracks.)
For content-based minimums:
Next continue to
distribute extra space
to the
base sizes
of tracks with
min track sizing function
of
min-content
or
max-content
to accommodate these items'
min-content contributions
For max-content minimums:
Next, if the grid container is being sized
under a
max-content constraint
continue to
distribute extra space
to the
base sizes
of tracks with
min track sizing function
of
auto
or
max-content
to accommodate these items'
limited max-content contributions
In all cases,
continue to
distribute extra space
to the
base sizes
of tracks with
min track sizing function
of
max-content
to accommodate these items'
max-content contributions
If at this point any track’s
growth limit
is now less than its
base size
increase its
growth limit
to match its
base size
For intrinsic maximums:
Next
distribute extra space
to the
growth limits
of tracks with
intrinsic
max track sizing function
to accommodate these items'
min-content contributions
Mark any tracks whose
growth limit
changed
from infinite to finite in this step
as
infinitely growable
for the next step.
Why does the
infinitely growable
flag exist?
Peter Salas explains
Consider the following case:

Two "auto" tracks (i.e. ''minmax(min-content, max-content) minmax(min-content, max-content)'').
Item 1 is in track 1, and has min-content = max-content = 10.
Item 2 spans tracks 1 and 2, and has min-content = 30, max-content = 100.

After resolving min-content/max-content for the first item, we have this.

track 1: base size = 10 growth limit = 10

track 2: base size = 0 growth limit = infinity

Then we resolve min-content/max-content for the second item.

Phase 1 sets the base size of track 2 to 20 so that the two tracks' base sizes sum to 30.
Phase 2 does nothing because there are no relevant tracks.
Phase 3 sets the growth limit of track 2 to 20 so that the two tracks' growth limits sum to 30.
In phase 4, we need to grow the sum of the growth limits by 70 to accommodate item 2.
Two options are:

1. Grow each track's growth limit equally,
and end up with growth limits = [45, 55].
2. Grow only the second track's growth limit,
and end up with growth limits = [10, 90].

By not considering the just-set growth limit as a constraint during space distribution
(i.e. by treating it as infinity),
we get the second result,
which we considered a better result because the first track remains sized exactly to the first item.
For max-content maximums:
Lastly continue to
distribute extra space
to the
growth limits
of tracks with
max track sizing function
of
max-content
to accommodate these items'
max-content contributions
Repeat incrementally for items with greater spans until all items have been considered.
Increase sizes to accommodate spanning items crossing
flexible tracks
Next, repeat the previous step
instead considering (together, rather than grouped by span size)
all items
that
do
span a track with a
flexible sizing function
while
distributing space
only
to
flexible tracks
(i.e. treating all other tracks as having a
fixed sizing function
if the sum of the
flexible sizing functions
of all
flexible tracks
spanned by the item
is greater than or equal to one,
distributing space to such tracks
according to the ratios of their
flexible sizing functions
rather than distributing space equally;
and if the sum is less than one,
distributing that proportion of space
according to the ratios of their
flexible sizing functions
and the rest equally
If any track still has an infinite
growth limit
(because, for example, it had no items placed in it
or it is a
flexible track
),
set its
growth limit
to its
base size
Note:
There is no single way to satisfy intrinsic sizing constraints
when items span across multiple tracks.
This algorithm embodies a number of heuristics
which have been seen to deliver good results on real-world use-cases,
such as the “game” examples earlier in this specification.
This algorithm may be updated in the future
to take into account more advanced heuristics as they are identified.
12.5.1.
Distributing Extra Space Across Spanned Tracks
To
distribute extra space
perform the following steps,
with these inputs:
whether to affect
base sizes
or
growth limits
(the
affected size
s).
which tracks to affect (the
affected track
s).
what intrinsic size contributions are being accommodated (the
size contribution
s)
of which grid items spanning those tracks (the
item
s).
Maintain separately for each
affected track
planned increase
initially set to 0.
(This prevents the size increases from becoming order-dependent.)
For each
accommodated
item
considering only tracks the item spans:
Find the space to distribute:
Subtract the
affected size
of every spanned track
(not just the
affected track
s)
from the item’s
size contribution
flooring it at zero.
(For infinite
growth limits
, substitute the track’s
base size
.)
This remaining size contribution is the
space
to distribute.
space
= max(0,
size contribution
- ∑
track-sizes
Distribute
space
up to limits:
Find the
item-incurred increase
for each
affected track
by:
distributing the
space
equally among these tracks,
freezing a track’s
item-incurred increase
as its
affected size
item-incurred increase
reaches its
limit
(and continuing to grow the unfrozen tracks as needed).
For
base sizes
the
limit
is its
growth limit
capped by its
fit-content()
argument if any.
For
growth limits
the
limit
is the
growth limit
if the
growth limit
is finite
and the track is not
infinitely growable
otherwise its
fit-content()
argument
if it has a
fit-content()
track sizing function
and infinity otherwise.
Note:
If the
affected size
was a
growth limit
and the track is not marked
infinitely growable
then each
item-incurred increase
will be zero.
Distribute
space
to non-affected tracks:
If extra
space
remains at this point,
and the item spans both
affected tracks
and non-
affected tracks
distribute space as for the previous step,
but into the non-
affected tracks
instead.
Note:
This distributes any remaining space into tracks
that have not yet reached their growth limits,
instead of violating the growth limits of the
affected tracks
Distribute
space
beyond limits:
If extra
space
remains at this point,
unfreeze and continue to distribute
space
to the
item-incurred increase
of…
when
accommodating minimum contributions
or
accommodating min-content contributions
into
base sizes
any
affected track
that happens to also have an intrinsic
max track sizing function
if there are no such tracks, then all
affected track
s.
when
accommodating max-content contributions
into
base sizes
any
affected track
that happens to also have a
max-content
max track sizing function
if there are no such tracks, then all
affected track
s.
when accommodating any contribution
into
growth limits
any
affected track
that has an intrinsic
max track sizing function
For this purpose,
the
max track sizing function
of a
fit-content()
track
is treated as
max-content
until the track reaches the limit specified as the
fit-content()
argument,
after which its
max track sizing function
is treated as being
fixed sizing function
of that argument
(which can change which tracks continue to receive space in this step).
Note:
This step prioritizes the distribution of space
for accommodating
size contribution
beyond the tracks' current growth limits
based on the types of their
max track sizing functions
For each
affected track
if the track’s
item-incurred increase
is larger than the track’s
planned increase
set the track’s
planned increase
to that value.
Update the tracks'
affected size
by adding in the
planned increase
so that the next round of space distribution will account for the increase.
(If the affected size is an infinite
growth limit
set it to the track’s
base size
plus the
planned increase
.)
12.6.
Maximize Tracks
If the
free space
is positive, distribute it equally
to the
base sizes
of all tracks,
freezing tracks as they reach their
growth limits
(and continuing to grow the unfrozen tracks as needed).
For the purpose of this step:
if sizing the
grid container
under a
max-content constraint
the
free space
is infinite;
if sizing under a
min-content constraint
the
free space
is zero.
If this would cause the grid to be larger than
the
grid container’s
inner size
as limited by its
max-width/height
then redo this step,
treating the
available grid space
as equal to
the
grid container’s
inner size
when it’s sized to its
max-width/height
12.7.
Expand Flexible Tracks
This step sizes
flexible tracks
using the largest value it can assign to an
fr
without exceeding the
available space
First, find the grid’s used
flex fraction
If the
free space
is zero
or if sizing the
grid container
under a
min-content constraint
The used
flex fraction
is zero.
Otherwise, if the
free space
is a
definite
length:
The used
flex fraction
is the result of
finding the size of an fr
using all of the
grid tracks
and a
space to fill
of the
available grid space
Otherwise, if the
free space
is an
indefinite
length:
The used
flex fraction
is the maximum of:
For each flexible track,
if the flexible track’s
flex factor
is greater than one,
the result of dividing the track’s
base size
by its
flex factor
otherwise,
the track’s
base size
For each
grid item
that crosses a flexible track,
the result of
finding the size of an fr
using all the grid tracks that the item crosses
and a
space to fill
of the item’s
max-content contribution
If using this
flex fraction
would cause the
grid
to be smaller than the
grid container’s
min-width/height
(or larger than the
grid container’s
max-width/height
),
then redo this step,
treating the
free space
as definite
and the
available grid space
as equal to
the
grid container’s
inner size
when it’s sized to its
min-width/height
max-width/height
).
For each
flexible track
if the product of the used
flex fraction
and the track’s
flex factor
is greater than the track’s
base size
set its
base size
to that product.
12.7.1.
Find the Size of an
fr
This algorithm finds the largest size that an
fr
unit can be
without exceeding the target size.
It must be called with a set of
grid tracks
and some quantity of
space to fill
Let
leftover space
be the
space to fill
minus the
base sizes
of the non-flexible
grid tracks
Let
flex factor sum
be the sum of
the
flex factors
of the
flexible tracks
If this value is less than 1,
set it to 1 instead.
Let the
hypothetical fr size
be the
leftover space
divided by the
flex factor sum
If the product of the
hypothetical fr size
and a
flexible track
’s
flex factor
is less than the track’s base size,
restart this algorithm
treating all such tracks as inflexible.
Return the
hypothetical fr size
12.8.
Stretch
auto
Tracks
When the
content-distribution property
of the
grid container
is
normal
or
stretch
in this axis,
this step expands tracks that have
an
auto
max track sizing function
by dividing any remaining positive,
definite
free space
equally amongst them.
If the
free space
is
indefinite
but the
grid container
has a
definite
min-width/height
use that size to calculate the
free space
for this step instead.
13.
Fragmenting Grid Layout
Grid containers
can break across pages
between rows or columns
and inside items.
The
break-*
properties apply to grid containers
as normal for the formatting context in which they participate.
This section defines how they apply to grid items
and the contents of grid items.
The following breaking rules refer to the
fragmentation container
as the “page”.
The same rules apply in any other
fragmentation context
(Substitute “page” with the appropriate
fragmentation container
type as needed.)
See the
CSS Fragmentation Module
[CSS3-BREAK]
The exact layout of a fragmented grid container is not defined in this level of Grid Layout.
However, breaks inside a grid container are subject to the following rules:
The
break-before
and
break-after
properties on
grid items
are propagated to their grid row.
The
break-before
property on the first row
and the
break-after
property on the last row
are propagated to the grid container.
A forced break inside a grid item effectively increases the size of its contents;
it does not trigger a forced break inside sibling items.
Class A break opportunities
occur
between rows or columns (whichever is in the appropriate axis),
and
Class C break opportunities
occur
between the first/last row (column) and the grid container’s content edges.
[CSS3-BREAK]
When a grid container is continued after a break,
the space available to its
grid items
(in the block flow direction of the fragmentation context)
is reduced by the space consumed by grid container fragments on previous pages.
The space consumed by a grid container fragment is
the size of its content box on that page.
If as a result of this adjustment the available space becomes negative,
it is set to zero.
Aside from the rearrangement of items imposed by the previous point,
UAs should attempt to minimize distortion of the grid container
with respect to unfragmented flow.
13.1.
Sample Fragmentation Algorithm
This section is non-normative.
This is a rough draft of one possible fragmentation algorithm,
and still needs to be severely cross-checked with the
[CSS-FLEXBOX-1]
algorithm for consistency.
Feedback is welcome; please reference the rules above instead as implementation guidance.
Layout the grid following the
§ 12 Grid Layout Algorithm
by using the
fragmentation container
’s inline size and assume unlimited block size.
During this step all
grid-row
auto
and
fr
values must be resolved.
Layout the grid container using the values resolved in the previous step.
If a
grid area
’s size changes due to fragmentation (do not include items that
span rows in this decision), increase the grid row size as necessary for rows that either:
have a content min track sizing function.
are in a grid that does not have an explicit height and the grid row is flexible.
If the grid height is
auto
, the height of the grid should be the sum of the final
row sizes.
If a grid area overflows the grid container due to margins being collapsed during
fragmentation, extend the grid container to contain this grid area (this step is
necessary in order to avoid circular layout dependencies due to fragmentation).
If the grid’s height is specified, steps three and four may cause the grid rows to
overflow the grid.
14.
Privacy Considerations
Grid Layout introduces no new privacy leaks.
15.
Security Considerations
Grid Layout introduces no new security considerations.
16.
Changes
16.1.
Changes since the
18 December 2020 CR
Clarified how
relative positioning
applies to
subgrids
Issue 7123
Relative positioning
applies to
subgrids
as normal,
and shifts the box and its content together as usual.
(Note: Relative positioning takes place after alignment,
and does not affect track sizing.)
Clarified that the
scrollbar gutter
is accounted for alongside the margin/border/padding
when calculating the contribution of the subgrid itself
(not just when accounting for its children).
Issue 9935
For each edge of a non-empty
subgrid
to account for the subgrid’s margin/border/padding
(and any scrollbar gutter)
at that edge,
and are additionally inflated by the subgrid’s own margin/border/padding
/gutter
at that edge.
Also incorporated
all changes to CSS Grid Level 1 since its previous publication
16.2.
Changes since the
August 2020 CR
Fix errors introduced by in the previous CR of CSS Grid 1 by an undocumented attempt to clarify
§ 6.2 Grid Item Sizing
interaction with
aspect-ratio
Updated some instances of “intrinsic aspect ratio”
to use the more generic term
preferred aspect ratio
Issue 4962
Minor editorial clean-up and better alignment of terminology across specs.
Changes since the
December 2019 CSS Grid Layout Level 2 Working Draft
None, except the incorporation of the full text of
CSS Grid level 1
See
Changes during Working Draft
for previous changes.
16.3.
Additions Since Level 1
The following features have been added since
Level 1
Subgrids
subgrid
17.
Acknowledgements
Many thanks to Mats Palmgren of Mozilla,
without whose support and feedback the subgrid feature
would not be able to move forward.
Thanks also to Daniel Tonon,
who insisted on intelligent handling of gaps in subgrids
and contributed illustrations;
and Rachel Andrew and Jen Simmons
who helped bridge the feedback gap between the CSS Working Group
and the Web design/authoring community.
Lastly,
the acknowledgements section of CSS Grid Level 2
would be incomplete without acknowledgement
of everyone who made the monumental task of
CSS Grid Level 1
possible.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
CR exit criteria
For this specification to be advanced to Proposed Recommendation,
there must be at least two independent, interoperable implementations
of each feature. Each feature may be implemented by a different set of
products, there is no requirement that all features be implemented by
a single product. For the purposes of this criterion, we define the
following terms:
independent
each implementation must be developed by a
different party and cannot share, reuse, or derive from code
used by another qualifying implementation. Sections of code that
have no bearing on the implementation of this specification are
exempt from this requirement.
interoperable
passing the respective test case(s) in the
official CSS test suite, or, if the implementation is not a Web
browser, an equivalent test. Every relevant test in the test
suite should have an equivalent test created if such a user
agent (UA) is to be used to claim interoperability. In addition
if such a UA is to be used to claim interoperability, then there
must one or more additional UAs which can also pass those
equivalent tests in the same way for the purpose of
interoperability. The equivalent tests must be made publicly
available for the purposes of peer review.
implementation
a user agent which:
implements the specification.
is available to the general public. The implementation may
be a shipping product or other publicly available version
(i.e., beta version, preview release, or "nightly build").
Non-shipping product releases must have implemented the
feature(s) for a period of at least one month in order to
demonstrate stability.
is not experimental (i.e., a version specifically designed
to pass the test suite and is not intended for normal usage
going forward).
The specification will remain Candidate Recommendation for at least
six months.
Index
Terms defined by this specification
augmented grid
, in § 10.1
auto
value for
, in § 8.3
value for grid-template-columns, grid-template-rows
, in § 7.2.1
auto-fill
, in § 7.2.3.2
auto-fit
, in § 7.2.3.2
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
, in § 7.8
automatic column position
, in § 8
automatic column span
, in § 8
automatic grid position
, in § 8
automatic grid span
, in § 8
automatic placement
, in § 7.7
automatic position
, in § 8
automatic row position
, in § 8
automatic row span
, in § 8
automatic span
, in § 8
auto-placement
, in § 7.7
auto-placement algorithm
, in § 8.5
auto-placement cursor
, in § 8.5

, in § 7.2.3.1

, in § 7.2
available grid space
, in § 12.2
base size
, in § 12.3
clamp
, in § 5.4
clamp a grid area
, in § 5.4
collapse
, in § 7.2.3.2
collapsed grid track
, in § 7.2.3.2
collapsed gutter
, in § 11.1
collapsed track
, in § 7.2.3.2
column
definition of
, in § 3
value for grid-auto-flow
, in § 7.7
column position
, in § 8
column span
, in § 8
computed repeat notation
, in § 7.2.5
computed track list
, in § 7.2.5
computed track size
, in § 7.2.5
content-based minimum size
, in § 6.6
content size suggestion
, in § 6.6
cursor
, in § 8.5

, in § 8.3
definite column position
, in § 8
definite grid position
, in § 8
definite position
, in § 8
definite row position
, in § 8
dense
, in § 7.7
distribute extra space
, in § 12.5.1
explicit
, in § 7.1
explicit column span
, in § 8
explicit grid
, in § 7.1
explicit grid column
, in § 7.1
explicit grid properties
, in § 7.1
explicit grid row
, in § 7.1
explicit grid span
, in § 8
explicit grid track
, in § 7.1
explicitly-assigned line name
, in § 7.2.2
explicit row span
, in § 8
explicit span
, in § 8

, in § 7.2
fit-content()
, in § 7.2.1

, in § 7.2

, in § 7.2.3.1

, in § 7.2
fixed sizing function
, in § 12.1

, in § 7.2.4

, in § 7.2.1
flex factor
, in § 7.2.1
flex factor sum
, in § 12.7.1
flex fraction
, in § 7.2.4
flexible length
, in § 7.2.4
flexible sizing function
, in § 12.1
flexible tracks
, in § 7.2.4
fr
, in § 7.2.4
free space
, in § 12.2
fr unit
, in § 7.2.4
grid
(property)
, in § 7.8
definition of
, in § 3
value for display
, in § 5.1
grid area
, in § 3.3
grid-area
, in § 8.4
grid-auto-columns
, in § 7.6
grid-auto-flow
, in § 7.7
grid-auto-rows
, in § 7.6
grid cell
, in § 3.2
grid column
, in § 3
grid-column
, in § 8.4
grid-column-end
, in § 8.3
grid column line
, in § 3.1
grid-column-start
, in § 8.3
grid container
, in § 5.1
grid formatting context
, in § 5.1
grid item
, in § 6
grid item placement algorithm
, in § 8.5
grid layout
, in § 3
Grid Layout Algorithm
, in § 11.6
grid-level
, in § 6.1

, in § 8.3
grid line
, in § 3.1
grid-modified document order
, in § 11.6
grid order
, in § 11.6
grid placement
, in § 8
grid-placement property
, in § 8
grid position
, in § 8
grid row
, in § 3
grid-row
, in § 8.4
grid-row-end
, in § 8.3
grid row line
, in § 3.1
grid-row-start
, in § 8.3
Grid Sizing Algorithm
, in § 12
grid span
, in § 8
grid-template
, in § 7.4
grid-template-areas
, in § 7.3
grid-template-columns
, in § 7.2
grid-template-rows
, in § 7.2
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
, in § 7.8
<'grid-template-rows'> / <'grid-template-columns'>
, in § 7.4
Grid track
, in § 3.2
growth limit
, in § 12.3
hypothetical fr size
, in § 12.7.1
implicit
, in § 7.5
implicit column span
, in § 8
implicit grid
, in § 7.5
implicit grid column
, in § 7.5
implicit grid lines
, in § 7.5
implicit grid properties
, in § 7.5
implicit grid row
, in § 7.5
implicit grid span
, in § 8
implicit grid track
, in § 7.5
implicitly-assigned line name
, in § 7.3.2
implicitly-named area
, in § 7.3.3
implicit row span
, in § 8
implicit span
, in § 8
infinitely growable
, in § 12.5

, in § 7.2
inline-grid
, in § 5.1
[ | ] && ?
, in § 8.3
intrinsic sizing function
, in § 12.1
leftover space
, in § 12.7.1

, in § 7.2.1
limited max-content contribution
, in § 12.5
limited min-content contribution
, in § 12.5
line name
, in § 7.2.2

, in § 7.2

, in § 7.2
line name set
, in § 7.2.5
[ ? ? ? ]+ [ / ]?
, in § 7.4
max-content
, in § 7.2.1
max track sizing function
, in § 12.2
min-content
, in § 7.2.1
minimum contribution
, in § 12.5
minmax()
, in § 7.2.1
min track sizing function
, in § 12.2
named cell token
, in § 7.3
named grid area
, in § 7.3

, in § 7.2.3.1
nested grid
, in § 3.4
none
value for grid-template
, in § 7.4
value for grid-template-areas
, in § 7.3
value for grid-template-rows, grid-template-columns
, in § 7.2
null cell token
, in § 7.3
occupied
, in § 8.5
parent grid
, in § 3.4
placement
, in § 8
position
, in § 8
repeat()
, in § 7.2.3
row
definition of
, in § 3
value for grid-auto-flow
, in § 7.7
row position
, in § 8
row span
, in § 8
sizing function
, in § 7.2
space to fill
, in § 12.7.1
span
, in § 8
span count
, in § 12.2
span && [ || ]
, in § 8.3
specified size suggestion
, in § 6.6
standalone axis
, in § 7.2
standalone grid
, in § 3.4
+
, in § 7.3
subgrid
definition of
, in § 3.4
value for grid-template-rows, grid-template-columns
, in § 7.2
subgridded
, in § 7.2
subgridded axis
, in § 7.2
subgrid ?
, in § 7.2
track
, in § 3.2

, in § 7.2

, in § 7.2
track list
, in § 7.2
|
, in § 7.2

, in § 7.2.3.1
track section
, in § 7.2.5

, in § 7.2
track sizing algorithm
, in § 12.3
track sizing function
, in § 7.2
transferred size suggestion
, in § 6.6
trash token
, in § 7.3
unoccupied
, in § 8.5
Terms defined by reference
[CSS-ALIGN-3]
defines the following terms:
align-content
align-items
align-self
alignment baseline
alignment context
baseline alignment
baseline set
baseline-sharing group
box alignment properties
center
column-gap
content-distribution properties
distributed alignment
fallback alignment
gap
generate baselines
gutter
justify-content
justify-items
justify-self
normal
(for align-self)
normal
(for justify-content)
normal
(for row-gap)
place-content
row-gap
self-alignment properties
space-around
space-between
space-evenly
start
stretch
(for align-content)
stretch
(for align-self)
stretch
(for justify-self)
synthesize baseline
[CSS-BOX-4]
defines the following terms:
content box
margin
[CSS-BREAK-4]
defines the following terms:
fragmentation container
fragmentation context
[CSS-CASCADE-5]
defines the following terms:
computed value
shorthand
specified value
sub-property
used value
[CSS-CONTAIN-2]
defines the following terms:
layout containment
[CSS-DISPLAY-3]
defines the following terms:
order
order-modified document order
[CSS-DISPLAY-4]
defines the following terms:
anonymous
block box
block container
block formatting context
block layout
block-level
blockify
containing block
display
establishes an independent formatting context
flow layout
in-flow
independent formatting context
inline formatting context
inline-level
out-of-flow
replaced element
text node
text sequence
[CSS-FLEXBOX-1]
defines the following terms:
flex container
flex item
flex-flow
[CSS-IMAGES-3]
defines the following terms:
natural size
[CSS-INLINE-3]
defines the following terms:
vertical-align
[CSS-MULTICOL-2]
defines the following terms:
multi-column container
[CSS-OVERFLOW-3]
defines the following terms:
overflow
scroll container
scrollable overflow rectangle
scrollable overflow region
scrollable overflow value
scrollbar gutter
[CSS-POSITION-3]
defines the following terms:
absolute position
bottom
left
position
relative
right
static
top
[CSS-PSEUDO-4]
defines the following terms:
::first-letter
::first-line
[CSS-SIZING-3]
defines the following terms:
auto
automatic minimum size
automatic size
available space
behave as auto
behaves as auto
definite
indefinite
inner size
intrinsic size contribution
max-content constraint
max-content contribution
max-content size
maximum size
min-content constraint
min-content contribution
min-content size
minimum size
outer size
preferred size
stretch fit
stretch-fit size
width
[CSS-SIZING-4]
defines the following terms:
aspect-ratio
fit-content
preferred aspect ratio
[CSS-SYNTAX-3]
defines the following terms:
ident code point
whitespace
[CSS-TEXT-4]
defines the following terms:
white-space
[CSS-VALUES-4]
defines the following terms:
&&







calc()
CSS-wide keywords
{A,B}
||
[CSS-WRITING-MODES-4]
defines the following terms:
block axis
block size
block-axis
block-end
block-start
end
flow-relative
inline axis
inline size
inline-axis
inline-end
inline-start
orthogonal flow
physical
start
writing mode
writing-mode
[CSS2]
defines the following terms:
auto
clear
float
margin
max-width
min-height
min-width
relative positioning
z-index
[CSS3-BREAK]
defines the following terms:
break-after
break-before
fragment
[CSS3-WRITING-MODES]
defines the following terms:
direction
[CSSOM]
defines the following terms:
resolved value
resolved value special case property
[INFRA]
defines the following terms:
for each
list
set
[MEDIAQUERIES-5]
defines the following terms:
media query
[WEB-ANIMATIONS-1]
defines the following terms:
by computed value
discrete
References
Normative References
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. 30 January 2026. WD. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. 4 August 2024. WD. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. 18 December 2018. FPWD. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. 13 January 2022. CR. URL:
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin.
CSS Containment Module Level 2
. 17 September 2022. WD. URL:
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 3
. 30 March 2023. CR. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. 6 November 2025. WD. URL:
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov.
CSS Flexible Box Layout Module Level 1
. 14 October 2025. CRD. URL:
[CSS-GRID-1]
Tab Atkins Jr.; et al.
CSS Grid Layout Module Level 1
. 26 March 2025. CRD. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. 18 December 2023. CRD. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. 18 December 2024. WD. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. 7 October 2025. WD. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. 7 October 2025. WD. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 27 June 2025. WD. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. 17 December 2021. WD. URL:
[CSS-SIZING-4]
Tab Atkins Jr.; Elika Etemad; Jen Simmons.
CSS Box Sizing Module Level 4
. 20 May 2021. WD. URL:
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. 24 December 2021. CRD. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. 29 May 2024. WD. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. 22 March 2024. CRD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. 30 July 2019. CR. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 3
. 4 December 2018. CR. URL:
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. 10 December 2019. REC. URL:
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[INFRA]
Anne van Kesteren; Domenic Denicola.
Infra Standard
. Living Standard. URL:
[MEDIAQUERIES-5]
Tab Atkins Jr.; et al.
Media Queries Level 5
. 19 February 2026. WD. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[WEB-ANIMATIONS-1]
Brian Birtles; et al.
Web Animations
. 5 June 2023. WD. URL:
Non-Normative References
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. 19 December 2024. FPWD. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
grid
<'grid-template'> |
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
none
grid containers
see individual properties
see individual properties
see individual properties
per grammar
see individual properties
grid-area
[ / ]{0,3}
auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
N/A
discrete
per grammar
see individual properties
grid-auto-columns
+
auto
grid containers
no
see Track Sizing
if the list lengths match, by computed value type per item; discrete otherwise
per grammar
see Track Sizing
grid-auto-flow
[ row | column ] || dense
row
grid containers
no
n/a
discrete
per grammar
specified keyword(s)
grid-auto-rows
+
auto
grid containers
no
see Track Sizing
if the list lengths match, by computed value type per item; discrete otherwise
per grammar
see Track Sizing
grid-column
[ / ]?
auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
N/A
discrete
per grammar
see individual properties
grid-column-end

auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
n/a
discrete
per grammar
specified keyword, identifier, and/or integer
grid-column-start

auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
n/a
discrete
per grammar
specified keyword, identifier, and/or integer
grid-row
[ / ]?
auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
N/A
discrete
per grammar
see individual properties
grid-row-end

auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
n/a
discrete
per grammar
specified keyword, identifier, and/or integer
grid-row-start

auto
grid items and absolutely-positioned boxes whose containing block is a grid container
no
n/a
discrete
per grammar
specified keyword, identifier, and/or integer
grid-template
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ ? ? ? ]+ [ / ]?
none
grid containers
see individual properties
see individual properties
see individual properties
per grammar
see individual properties
grid-template-areas
none | +
none
grid containers
no
n/a
discrete
per grammar
the keyword none or a list of string values
grid-template-columns
none | | | subgrid ?
none
grid containers
no
refer to corresponding dimension of the content area
if the list lengths match, by computed value type per item in the computed track list (see and ); discrete otherwise
per grammar
the keyword none or a computed track list
grid-template-rows
none | | | subgrid ?
none
grid containers
no
refer to corresponding dimension of the content area
if the list lengths match, by computed value type per item in the computed track list (see and ); discrete otherwise
per grammar
the keyword none or a computed track list
Issues Index
If you notice any inconsistencies between this Grid Layout Module
and the
Flexible Box Layout Module
please report them to the CSSWG,
as this is likely an error.
The first bullet point of the above list
means that implicit tracks get serialized
as part of
grid-template-rows
/etc.,
despite the fact that an author
cannot
actually specify implicit track sizes in those properties!
So
grid-template-rows
and
grid-template-columns
values
might not round-trip correctly:
const
getComputedStyle
gridEl
);
gridEl
style
gridTemplateRows
gridTemplateRows
// Code like this
should
be a no-op,
// but if there are any implicit rows,
// this will convert them into explicit rows,
// possibly changing how grid items are positioned
// and altering the overall size of the grid!
This is an accidental property of an early implementation
that leaked into later implementations
without much thought given to it.
We intend to remove it from the spec,
but not until after we’ve defined a CSSOM API
for getting information about implicit tracks,
as currently this is the only way to get that information
and a number of pages rely on that.
The CSS Working Group is considering whether to also return used values
for the
grid-placement properties
and is looking for feedback, especially from implementors.
See
discussion