CSS Grid Layout Module Level 1

.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.
Absolute Positioning
9.1.
With a Grid Container as Containing Block
If an absolutely positioned element’s
containing block
is generated by a
grid container
the containing block corresponds to the
grid area
determined by its
grid-placement properties
The offset properties (
top
right
bottom
left
then indicate offsets inwards from the corresponding edges
of this
containing block
, as normal.
Note:
While absolutely-positioning an element to a
grid container
does allow it to align to that container’s
grid lines
such elements do not take up space or otherwise participate in the layout of the grid.
.grid {
grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
/* 4 equal-height rows filling the
grid container
4 columns of ''10rem'' each */
justify-content: center;
/* center the grid horizontally within the
grid container
*/
position: relative;
/* Establish abspos
containing block
*/

.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.)
9.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.
10.
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
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.
10.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
§ 11.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
10.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
10.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.
10.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.
10.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.
10.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.
11.
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
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.
11.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
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.
Would it help to have
heuristics
that attempt a more accurate initial estimate?
E.g. assuming the
available space
that it would have as the maximum of:
the sum of all
definite
track sizes that it spans
(using the maximum of a track’s min and max sizing functions,
if both are definite,
the argument to
fit-content()
if that is definite).
the item’s
min-content
size,
if any track that it spans
has a
min-content
or
fit-content()
sizing function.
the item’s
automatic minimum size
if any track that it spans
has an
auto
min sizing function.
infinity, if any track that it spans
has a
max-content
min sizing function
or a
max-content
auto
, or

max sizing function.
This is may reduce the amount of re-layout passes that are necessary,
but will it produce a different or better result in any cases?
Should we adopt it into the spec?
Next, the
track sizing algorithm
resolves the sizes of the
grid rows
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.
11.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.
11.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
11.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
11.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.
11.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
.)
11.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
11.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.
11.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
11.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.
12.
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.
12.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
§ 11 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.
13.
Privacy Considerations
Grid Layout introduces no new privacy leaks.
14.
Security Considerations
Grid Layout introduces no new security considerations.
Acknowledgements
This specification is made possible by input from
Erik Anderson,
Rachel Andrew,
Rossen Atanassov,
Oriol Brufau,
Manuel Rego Casasnovas,
Arron Eicholz,
Javier Fernandez,
Sylvain Galineau,
Markus Mielke,
Daniel Holbert,
John Jansen,
Chris Jones,
Kathy Kam,
Veljko Miljanic,
Charbel Nicolas,
Mats Palmgren,
François Remy,
Sergio Villar Senin,
Jen Simmons,
Christian Stockwell,
Eugene Veselov,
and the CSS Working Group members,
with special thanks to
Rossen Atanassov, Alex Mogilevsky, Phil Cupp, and Peter Salas of Microsoft for creating the initial proposal.
Thanks also to Eliot Graff for editorial input.
Changes
This section documents the changes since previous publications.
Changes since the
18 December 2020 CR
Changed intrinsic track space distribution
across flexible tracks
for flex sums between zero and one to interpolate
between ratio-relative and equal distribution
for continuity from zero.
Issue 6078
if the sum of the
flexible sizing functions
of all
flexible tracks
spanned by the item
is greater than
zero
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
Clarified that the
content-based minimum size
of a grid item
is a type of
intrinsic size contribution
and thus impacted by associated rules in
[CSS-SIZING-3]
Issue 5665
Explicitly restricted the application of the
transferred size suggestion
to
replaced elements
as was originally intended,
now that
non-replaced elements
can also have an aspect ratio
via
aspect-ratio
[CSS-SIZING-4]
Issue 6069
Defined that percentages on the
preferred size
and the
maximum size
of compressible replaced elements
are resolved against zero and used to clamp the
content-based minimum size
so that their
automatic minimum size
is not larger than their
min-content contribution
Issue #6278
In all cases, the size suggestion is additionally clamped by the
maximum size
in the affected axis,
if it’s
definite
If the item is a
compressible replaced element
and has a
definite
preferred size
or
maximum size
in the relevant axis,
the size suggestion is capped by those sizes;
for this purpose, any indefinite percentages in these sizes
are resolved against zero (and considered
definite
).
Defined that percentages on the
preferred size
and the
maximum size
always clamp the
transferred size suggestion
so that it is strictly weaker than any size constraints
applied natively to that axis.
Issue #6278
If the item has a
preferred aspect ratio
and its
preferred size
in the opposite axis is
definite
then the
transferred size suggestion
is that size
(clamped by the opposite-axis
minimum
and
maximum sizes
if they are
definite
),
converted through the aspect ratio.
It is otherwise undefined.
If the item’s has a
definite
preferred size
or
maximum size
in the relevant axis,
the
transferred size suggestion
is capped by those sizes;
for this purpose, any indefinite percentages in these sizes
are resolved against zero (and considered
definite
).
Made
§ 10.2 Aligning with auto margins
normative and tightened up wording,
since some aspects of this behavior were not otherwise defined elsewhere.
(part of
Issue 5923
Condition
§ 11.8 Stretch auto Tracks
on the relevant
content-distribution property
behaving as
stretch
this condition was lost in translation during the
earlier change
to better incorporate
stretch
handling into the algorithm.
Issue 5966
Defined more precisely how
fit-content()
limits track growth
when accommodating spanning items.
Issue 4549
For intrinsic maximums:
Next
distribute extra space
to the
growth limits
of tracks with
max track sizing function
of
max-content
to accommodate these items'
max-content contributions
However, limit the growth of any
fit-content()
tracks
by their
fit-content()
argument.
Distribute
space
up to limits:
[…]
For
base sizes
the
limit
is its
growth limit
capped by its
fit-content()
argument if any
For
growth limits
the
limit
is
infinity if it is marked as
infinitely growable
and equal to the
growth limit
otherwise
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
Distribute
space
beyond limits:
[…]
when accommodating any contribution
into
growth limits
all
affected track
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
it
the track
reaches the limit specified as the
fit-content()
argument,
after which
it
its
max track sizing function
is treated as
having
being
fixed sizing function
of that argument
(which can change which tracks continue to receive space in this step)
Remove
static position
sensitivity to the
grid-placement properties
relying always on the
grid container
content box
Issue 7661
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
However, if the
grid container
parent is also the generator of the absolutely positioned element’s
containing block
instead use the
grid area
determined in
§ 9.1 With a Grid Container as Containing Block
Rearranged the Grid Sizing Algorithm overview
to better convey the relationship
between grid container sizing
and grid track sizing.
See
§ 11 Grid Layout Algorithm
Issue 3418
Changes since the
18 August 2020 CR
Fix errors introduced by in the previous CR 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
15 December 2017 CR
Disposition of Comments
is available.
Major Changes
Removed the option for grid-item block-axis margins and paddings
to be resolved against the block dimension;
they must be resolved against the inline dimension, as for blocks.
Issue 2085
Adjusted handling of items spanning
flexible tracks
to intrinsic track sizes so that
they contribute to the size of flexible tracks that have an intrinsic min
rather than being ignored.
Issue 2177
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:
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
treating flexible tracks as having
max track sizing function
equal to their
min track sizing function
distributing space
only
to flexible tracks
(i.e. treating all other tracks as having a
fixed sizing function
of their current
base size
distributing space to such tracks
according to the ratios of their
flexible sizing functions
rather than distributing space equally
Limited the contributions of items to an
auto
minimum track
to not overflow a fixed maximum when sizing the grid under a min-content/max-content constraint.
Issue 2303
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’
min/max-content contributions
respectively
each limited to less than or equal to the
max track sizing function
if that is
fixed
and ultimately floored by its
minimum contribution
ISSUE: Do something about spanning items.
Better incorporated the alignment of tracks
align-content
justify-content
into the track sizing algorithm.
Issue 2557
Issue 2697
Require the used value of a track listing
to be serialized without using
repeat()
notation.
Issue 2427
Specify a minimum number of tracks that a UA should support
(absent memory pressure or similar).
Issue 2261
Since memory is limited,
UAs may clamp the possible size of the
grid
to be within a UA-defined limit
(which should accommodate lines at in the range [-10000, 10000]),
dropping all lines outside that limit.
If a grid item is placed outside this limit,
its grid area must be
clamped
to within this limited grid.
Exclude
auto
from line name

Issue 2856
Required that the
specified value
of
grid-template-areas
normalize
null cell tokens
and
whitespace
Issue 3261
Both the
specified value
and
computed value
of a

value of
grid-template-areas
serializes
each
null cell token
as a single "." (U+002E FULL STOP)
and each sequence of
whitespace
as a single space (U+0020 SPACE).
The static position of a grid container child
should be resolved against the content edge, not padding edge, of the grid container.
Issue 3020
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
padding
content
edges of the
grid container
The grid (and surrounding padding) is included in the scrollable overflow area.
See
§ 5.3 Scrollable Grid Overflow
Issue 3638
Issue 3665
Don’t divide by zero when
distributing extra space
across
flexible tracks
when the sum of their
flexible sizing functions
is zero.
Issue 3694
if the sum of the
flexible sizing functions
of all
flexible tracks
spanned by the item
is greater than zero,
distributing space to such tracks
according to the ratios of their
flexible sizing functions
rather than distributing space equally
Don’t calculate growth limits of flexible tracks as intrinsic sizes;
set them to the base size at the end of intrinsic track sizing
so that they don’t grow during Maximize Tracks
(due to differences between interpreting
auto
min track sizing functions
and
max track sizing functions
, etc.).
Issue 3693
treating
flexible tracks
as having
max track sizing function
equal to their
min track sizing function
an infinite
growth limit
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
Treat min-content constraints the same as zero free space
when expanding flexible tracks.
Issue 3683
If the
free space
is zero
or if sizing the
grid container
under a
min-content constraint
The used
flex fraction
is zero.
Also zeroed out the automatic minimum contribution of a grid item
if it spans multiple tracks,
at least one of which is flexible.
Issue 4783
To provide a more reasonable default
minimum size
for
grid items
the used value of
an
its
automatic minimum size
in a given axis
on a
grid item
that is not a
scroll container
and that spans at least one
track
in that axis
whose
min track sizing function
is
auto
is its
content-based minimum size
if all of the following are true:
it is not a scroll container
it spans at least one
track
in that axis
whose
min track sizing function
is
auto
if it spans more than one track in that axis, none of those tracks are
flexible
Otherwise,
the used
automatic minimum size
is
otherwise
zero, as usual.
Minor Changes
Revert unintentional change to ignore items past the first row
for the purpose of finding the grid container’s baselines.
Also clarify the traversal order.
Issue 3645
Otherwise, if the grid container has at least one
grid item
whose area intersects the first (last) row
the grid container’s first (last) baseline set
is
generated
from
the
alignment baseline
of the first (last)
such
grid item
in row-major
grid order
(according to the
writing mode
of the
grid container
If the item has no
alignment baseline
in the grid’s inline axis,
then one is first
synthesized
from its border edges.
Floor the max track sizing function by the min track sizing function
when calculating the number of
auto-fit
or
auto-fill
repetitions.
Issue 4043
… (treating each track as its
max track sizing function
if that is
definite
or as its minimum track sizing function otherwise,
flooring the
max track sizing function
by the
min track sizing function
if both are
definite
and taking
gap
into account) …
Initialize the
growth limit
of
flexible tracks
to infinity,
instead of setting it first to the base size and changing it later.
Issue 4313
An
intrinsic sizing function
flexible sizing function
Use an initial
growth limit
of infinity.
flexible sizing function
Use the track’s initial
base size
as its initial
growth limit
treating
flexible tracks
as having
an infinite
growth limit
This change is purely editorial; it should have no effect on implementations.
Clarified that white space is normalized in
grid-template-areas

values.
Issue 4335
See
§ 7.3.1 Serialization Of Template Strings
Properly specified that the "use baseline-aligned items if possible"
and "use first item that shows up, even if not in the first row"
conditions properly combine together,
so if there’s nothing in the first row
but a baseline-aligned item in the second,
we’ll use that
(rather than just taking the first item in that row).
Part of
Issue 3645
Find the first (last) row of the
grid container
containing at least one
grid item
If any of the
grid items
whose areas intersect the
grid container
’s first (last) row
participate in
baseline alignment
If any of the
grid items
intersecting this row
participate in
baseline alignment
the grid container’s
baseline set
is
generated
from
the shared
alignment baseline
of those
grid items
Otherwise, if the grid container has at least one
grid item
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 item has no
alignment baseline
in the grid’s inline axis,
If the
grid item
has no
alignment baseline
in the grid’s inline axis,
then one is first
synthesized
from its border edges.
Otherwise, the grid container has no first (last)
baseline set
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
Properly limit the item search to just
the items participating
in the correct baseline alignment
Issue 5293
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
Required
grid-template-areas
to define at least one cell in the grid;
grid-template-areas: "" "";
is invalid.
Issue 5110
All strings must have the same number of
columns
cell tokens
named cell tokens
and/or
null cell tokens
),
and at least one cell token,
or else the declaration is invalid.
Revert accidental change of
min-content contribution
to
minimum contribution
in distributing space for intrinsic
max track sizing functions
Issue 4790
For intrinsic maximums:
Next increase the
growth limit
of tracks with
an
intrinsic
max track sizing function
by
distributing extra space
as needed
to account for these items'
minimum
min-content
contributions.
Pin
automatic minimum size
conditional on
computed value
of
overflow
rather than on being a
scroll container
to avoid cases such as
replaced elements
whose computed
scrollable overflow values
resolve to
non-scrollable
used values
7714
Clarifications
Clarified that
grid-auto-rows
and
grid-auto-columns
apply to
explicit grid tracks
created by
grid-template-areas
that are not assigned a size by
grid-template-rows
or
grid-template-columns
Issue 4914
… These lines together with the
explicit grid
form the
implicit grid
The
grid-auto-rows
and
grid-auto-columns
properties size these
implicit grid tracks
as well as any
explicit grid tracks
created by
grid-template-areas
but not explicitly sized by
grid-template-rows
or
grid-template-columns
The
grid-auto-columns
and
grid-auto-rows
properties specify
the size of
such implicit tracks
tracks not assigned a size
by
grid-template-rows
or
grid-template-columns
If multiple track sizes are given, the pattern is repeated as necessary
to find the size of the
implicit
affected
tracks.
The first
implicit grid
track after the
explicit grid
last explicitly-sized
track
receives the first specified size, and so on forwards;
and the last
implicit grid track
before the
explicit grid
receives the last specified size, and so on backwards.
Added reminder to
track sizing algorithm
that gutters are treated as fixed-size tracks;
clarified their relationship to spanning items
(they are spanned by the same items as their lines, of course).
Issue 2201
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: 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.
Ensure that track sizes remain floored at zero during intrinsic sizing.
Issue 2655
More clearly defined computed value and animation type lines of each property,
particularly
grid-template-rows
and
grid-template-columns
PR 3198
Issue 3201
Clarify that the
minimum contribution
is a type of
intrinsic size contribution
Issue 3660
The
minimum contribution
of an item
which is considered a type of
intrinsic size contribution
is the outer size that would result…
Clarify the conditions for distributing space beyond growth limits
by clearly matching against the correct phases.
Issue 3621
when
handling base sizes of tracks with
min-content
or
auto
minimums
accommodating minimum contributions
or accommodating min-content contributions
any affected track that happens to also have an intrinsic
max track sizing function
if there are no such tracks, then all affected tracks.
when
handling base sizes of tracks with
max-content
minimums
accommodating max-content contributions
any affected track that happens to also have a
max-content
max track sizing function
if there are no such tracks, then all affected tracks.
Clarify the cases where the minimum contribution
is taken from the minimum size.
Issue 3612
The
minimum contribution
of an item
is the smallest outer size it can have.
Specifically, it is the outer size
that would result from assuming
the item’s used
minimum size
min-width
or
min-height
, whichever matches the relevant axis)
as its
preferred size
width
or
height
, whichever matches the relevant axis)
if its computed
preferred size
behaves as auto
or depends on the size of the container in the relevant axis
else is the item’s
min-content contribution
Because the
minimum size
often depends
on the size of the item’s content,
it is considered a type of
intrinsic size contribution
Clarified that blockification occurs
through intervening elements with
display: contents
and does not consider whether the
grid
inline-grid
element
ends up actually generating a
grid container
box.
Issue 4065
The
display
value of a
grid item
is
blockified
if the specified
display
of an in-flow child of an element generating a
grid container
is an inline-level value, it computes to its block-level equivalent.
If the
computed
display
value of an element’s nearest ancestor element
(skipping
display:contents
ancestors)
is
grid
or
inline-gird
the element’s own
display
value is
blockified
Note:
Blockification still occurs even when the
flex
or
inline-flex
element does not end up generating a
flex container
box,
e.g. when it is
replaced
or in a
display: none
subtree.
Added a reminder that the argument to
fit-content()
does not clamp the
automatic minimum size
Issue 4549
The argument to
fit-content()
does
not
clamp
the
content-based minimum size
in the same way as a
fixed
max track sizing function
Clarified antecedents for flexible tracks
in
§ 11.7 Expand Flexible Tracks
The used flex fraction is the maximum of:
For each flexible track,
if the 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.
Make initial calculation of
item-incurred increase
easier to read.
Issue 5351
Distribute space
to base sizes
up to
growth
limits:
Find the
item-incurred increase
for each spanned track with an affected size
by: distributing the space equally among such tracks,
freezing a track’s
item-incurred increase
as its affected size +
item-incurred increase
reaches its
growth limit
limit
(and continuing to grow the unfrozen tracks as needed).
If a track was marked as
infinitely growable
for this phase,
treat its
growth limit
as infinite for this calculation
(and then unmark it).
For
base sizes
the
limit
is its
growth limit
For
growth limits
the
limit
is infinity if it is marked as
infinitely growable
and equal to the
growth limit
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
this step has no effect
Changes since the
29 September 2016 CR
Disposition of Comments
is also available.
Major Changes
Deferred
subgrid
feature to Level 2
due to lack of implementation and desire for further discussion.
Issue 958
Removed
grid-row-gap
and
grid-column-gap
from the list of properties reset by the
grid
shorthand.
Issue 1036
Removed
grid-row-gap
grid-column-gap
, and
grid-gap
properties,
replacing with
row-gap
column-gap
, and
gap
which are now defined in
CSS Box Alignment
Issue 1696
Changed
automatic sizing
of grid items (such as images) with
natural dimensions
so that they maintain their
natural dimensions
whenever the alignment properties are
normal
(the default case).
Issue #523
See
§ 6.2 Grid Item Sizing
(vs.
original
).
Changed the behavior of

tracks
inside a
grid container
whose size depends on the size of those tracks
to match implementations by
contributing their dimensions sized as
auto
and subsequently resolve the percentage against
the resulting
grid container
size
rather than being treated exactly as an
auto
track
or having their size and that of the
grid container
increased from an
auto
size
in order to honor the percentage without overflow.
This will frequently result in tracks overflowing
the
grid container
and in the contents of tracks overflowing the tracks
when

sizes are used
in
fit-content
-sized
grid containers
such as
auto
-sized inline or floated
grid containers
(To avoid this problem, use

units instead,
which are intended to maintain their ratios and not overflow
when the grid is intrinsically-sized.)
If the size of the
grid container
depends on the size of its tracks,
then the

must be treated as
auto
for the purpose of calculating the intrinsic sizes of the
grid container
and then resolve against that size for the purpose of laying out the grid and its items
The UA
may
adjust the intrinsic size contributions of the track
to the size of the
grid container
and increase the final size of the track
by the minimum amount that would result in honoring the percentage.
Significant Adjustments and Fixes
Applied flex factor clamping to 1 also to indefinite case
Issue 26
see
discussion
):
Each flexible track’s
base size
divided by its
flex factor
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
Better integrated
stretch
sizing of grid tracks
into the track sizing algorithm.
Issue 1150
Issue 1866
and the tracks are aligned within the
grid container
according to the
align-content
and
justify-content
properties.
Note: This can introduce extra space within or between tracks.
When introducing space within tracks,
only tracks with an
auto
max track sizing function
accept space.
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.
There are
steps:
Initialize Track Sizes
Resolve Intrinsic Track Sizes
Maximize Tracks
Expand Flexible Tracks
Expand Stretched
auto
Tracks
Stretch
auto
Tracks
This step sizes 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.
Better integrated
baseline alignment
of grid items
into the track sizing algorithm;
excluded cyclic cases from participating.
Issue 1039
Issue 1365
,)
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
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.
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.
Adjusted
automatic minimum size
of grid items
to only trigger when spanning
auto
tracks
Issue 12
and ensured that this correctly affects the transferred size when the item has an aspect ratio
Issue 11
so that this implied minimum does not end up forcing overflow:
… the
auto
value of
min-width
min-height
also applies an
automatic minimum size
in the specified axis
to
grid items
whose
overflow
is
visible
and which span at least one
track
whose
min track sizing function
is
auto
However, if the
grid item
spans only
grid tracks
that have a
fixed
max track sizing function
its
automatic minimum size
specified size and content size
in that dimension
(and the input to the transferred size in the other dimension)
are further clamped to less than or equal to the
stretch fit
the
grid area
’s size
(so as to prevent the
automatic minimum size
from forcing overflow of its fixed-size grid area)
Adjusted
automatic minimum size
of grid items
to use the transferred size in preference to the content size,
rather than taking the smaller of the two.
Issue #1149
The effect is analogous to the
automatic minimum size
imposed on
flex items
.)
[CSS-FLEXBOX-1]
The
automatic minimum size
for a
grid item
in a given dimension is
its specified size if it exists,
otherwise its transferred size if that exists,
else its content size,
each as defined in
[CSS-FLEXBOX-1]
However, if the
grid item
spans only
grid tracks
that have a
fixed
max track sizing function
Fixed error in algorithm’s handling of
auto
min track sizes
where it didn’t correctly handle max-content constraints;
and also made some editorial improvements.
Issue 5
Increase sizes to accommodate spanning items:
Next, consider the items with a span of 2
that do not span a track with a
flexible sizing function
treating a
min track sizing function
of
auto
as
min-content
max-content
when the grid container is being sized under a
min
max-content constraint
(respectively)
For content-based minimums:
Next continue to increase the
base size
of tracks with
min track sizing function
of
min-content
or
max-content
and tracks with a
min track sizing function
of
auto
if the
grid container
is being sized under a
min-content constraint
by
distributing extra space
as needed
to account for these items'
min-content contributions
For max-content minimums:
Third continue to increase the
base size
of tracks with
min track sizing function
of
max-content
and tracks with a
max track sizing function
of
auto
if the
grid container
is being sized under a
max-content constraint
by
distributing extra space
as needed
to account for these items'
max-content contributions
Fixed error in
distribute extra space
algorithm,
where the accumulation was folded in per item rather than per track set;
and where it was not clear that distributed space per item
should be max()ed with the planned increase rather than added to it.
Issue #1729
For each considered item,
Distribute space to base sizes up to growth limits:
Distribute the space equally to the planned increase of each spanned track with an affected size
Find the
item-incurred increase
for each spanned track with an affected size
by distributing the space equally among them
freezing tracks as their size reaches their
growth limit
(and continuing to grow the unfrozen tracks as needed).
Distribute space beyond growth limits:
If space remains after all tracks are frozen,
unfreeze and continue to distribute space to
the
item-incurred increase
of
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.
[numbering change from
2.4
to 3]
Update the tracks' affected sizes
by adding in the
planned increase
(If the affected size is an infinite
growth limit
set it to the track’s
base size
plus the
planned increase
.)
Specified that
grid areas
are considered
definite
for the purpose of laying out
grid items
after track sizing is done.
Issue 1319
Issue 1320
Once the size of each
grid area
is thus established,
the
grid items
are laid out into their respective containing blocks.
The
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.
Fixed error in
block-level
grid container
sizing definition:
in-flow block-level
grid containers
use the
stretch-fit size
while out-of-flow block-level grids use the
fit-content size
exactly as non-replaced
block boxes
do.
Issue 1734
As a
block-level
box in a
block formatting context
it is sized like a
block box
that establishes a formatting context,
with an
auto
inline size
calculated as for
in-flow
non-replaced
block boxes.
Fixed error in pattern repetition for finding
implicit grid track
sizes.
Issue 1356
If multiple track sizes are given, the pattern is repeated as necessary
to find the size of the implicit tracks.
The first
implicit grid track
before
after
the
explicit grid
receives the first specified size, and so on forwards;
and the last
implicit grid track
before the
explicit grid
receives the last specified size, and so on backwards.
Clarifications
Clarified that
fit-content()
is not affected by
stretch
align-content
justify-content
Issue 1732
Represents the formula
min(
max-content
, max(
auto
argument
))
which is calculated
like
similar to
auto
(i.e.
minmax(auto, max-content)
except that the track size is clamped at
argument
if it is greater than the
auto
minimum.
Clarified definition of
minimum contribution
Issue #507
Otherwise,
set its
base size
to the maximum of its items’
minimum contributions
The
minimum contribution
of an item is
the
value specified by its respective
outer size that would result from assuming
the item’s
min-width
or
min-height
value
(whichever matches the relevant axis)
as its specified size
if its specified size
width
or
height
, whichever matches the relevant axis)
is
auto
or else the item’s
min-content contribution
Clarified that the space allotted through
distributed alignment
is part of the gutter, and collapses with it.
Issue #1140
collapsed track
is treated as having
a fixed
track sizing function
of
0px
and the
gutters
on either side of it
—​including any space allotted through
distributed alignment
—​
collapse
See also changes to
CSS Box Alignment
Alignment Subject(s):
The non-
collapsed
grid tracks
in the appropriate axis.
The
grid tracks
in the appropriate axis,
with any spacing inserted between tracks
added to the relevant
gutters
and treating
collapsed gutters
as a single opportunity for space insertion.
Changed description of
flexible length
to use “leftover space” instead of “free space”
to avoid mixing up concepts under the same name.
Issue #1120
Clarified that the
Maximize Tracks
step
grows the
base sizes
of the tracks.
Issue #1120
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).
Miscellaneous trivial fixes and minor editorial improvements.
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 § 9.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 grid position
, in § 8
automatic placement
, in § 7.7
automatic position
, in § 8
automatic row position
, 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 § 11.2
base size
, in § 11.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 § 10.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 column span
, in § 8
definite grid position
, in § 8
definite grid span
, in § 8
definite position
, in § 8
definite row position
, in § 8
definite row span
, in § 8
definite span
, in § 8
dense
, in § 7.7
distribute extra space
, in § 11.5.1
explicit
, in § 7.1
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 track
, in § 7.1
explicitly-assigned line name
, in § 7.2.2

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

, in § 7.2

, in § 7.2.3.1

, in § 7.2
fixed sizing function
, in § 11.1

, in § 7.2.4

, in § 7.2.1
flex factor
, in § 7.2.1
flex factor sum
, in § 11.7.1
flex fraction
, in § 7.2.4
flexible length
, in § 7.2.4
flexible sizing function
, in § 11.1
flexible tracks
, in § 7.2.4
fr
, in § 7.2.4
free space
, in § 11.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 § 10.6
grid-level
, in § 6.1

, in § 8.3
grid line
, in § 3.1
grid-modified document order
, in § 10.6
grid order
, in § 10.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 § 11
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 § 11.3
hypothetical fr size
, in § 11.7.1
implicit
, in § 7.5
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 track
, in § 7.5
implicitly-assigned line name
, in § 7.3.2
implicitly-named area
, in § 7.3.3
infinitely growable
, in § 11.5

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

, in § 7.2.1
limited max-content contribution
, in § 11.5
limited min-content contribution
, in § 11.5
line name
, in § 7.2.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 § 11.2
min-content
, in § 7.2.1
minimum contribution
, in § 11.5
minmax()
, in § 7.2.1
min track sizing function
, in § 11.2
named cell token
, in § 7.3
named grid area
, in § 7.3
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
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 § 11.7.1
span
, in § 8
span count
, in § 11.2
span && [ || ]
, in § 8.3
specified size suggestion
, in § 6.6
+
, in § 7.3
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 § 11.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
grid-column-gap
grid-gap
grid-row-gap
gutter
justify-content
justify-items
justify-self
normal
(for align-self)
normal
(for justify-content)
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-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
non-replaced element
out-of-flow
replaced element
text node
text sequence
[CSS-FLEXBOX-1]
defines the following terms:
flex
flex container
flex item
flex-flow
inline-flex
order
order-modified document order
[CSS-GRID-2]
defines the following terms:
collapsed track
[CSS-IMAGES-3]
defines the following terms:
natural dimension
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:
non-scrollable overflow value
overflow
scroll container
scrollable overflow rectangle
scrollable overflow region
scrollable overflow value
visible
[CSS-POSITION-3]
defines the following terms:
bottom
left
position
relative
right
static
static position
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
fit-content size
height
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
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 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
. 11 March 2025. 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-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
. 19 December 2024. FPWD. URL:
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al.
CSS Flexible Box Layout Module Level 1
. 19 November 2018. CR. URL:
[CSS-GRID-2]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov.
CSS Grid Layout Module Level 2
. 18 December 2020. 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
. 29 March 2023. WD. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. 11 March 2025. WD. URL:
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 30 December 2022. 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]
Dean Jackson; et al.
Media Queries Level 5
. 18 December 2021. 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:
Informative 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 | |
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 | |
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
Would it help to have
heuristics
that attempt a more accurate initial estimate?
E.g. assuming the
available space
that it would have as the maximum of:
the sum of all
definite
track sizes that it spans
(using the maximum of a track’s min and max sizing functions,
if both are definite,
the argument to
fit-content()
if that is definite).
the item’s
min-content
size,
if any track that it spans
has a
min-content
or
fit-content()
sizing function.
the item’s
automatic minimum size
if any track that it spans
has an
auto
min sizing function.
infinity, if any track that it spans
has a
max-content
min sizing function
or a
max-content
auto
, or

max sizing function.
This is may reduce the amount of re-layout passes that are necessary,
but will it produce a different or better result in any cases?
Should we adopt it into the spec?