CSS Grid Layout

    Jump to:
  1. Grid
  2. Grid auto
  3. Column
  4. Row
  5. Template
  6. Gap

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Grid Property

The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration.

Note: You can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

Syntax

  1. /* <'grid-template'> values */
  2. grid: none;
  3. grid: "a" 100px "b" 1fr;
  4. grid: [linename1] "a" 100px [linename2];
  5. grid: "a" 200px "b" min-content;
  6. grid: "a" minmax(100px, max-content) "b" 20%;
  7. grid: 100px / 200px;
  8. grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

  9. /* <'grid-template-rows'> /
  10. [ auto-flow && dense? ] <'grid-auto-columns'>? values */
  11. grid: 200px / auto-flow;
  12. grid: 30% / auto-flow dense;
  13. grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
  14. grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

  15. /* [ auto-flow && dense? ] <'grid-auto-rows'>? /
  16. <'grid-template-columns'> values */
  17. grid: auto-flow / 200px;
  18. grid: auto-flow dense / 30%;
  19. grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
  20. grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

  21. /* Global values */
  22. grid: inherit;
  23. grid: initial;
  24. grid: unset;

Values

<'grid-template'> Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? Sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow also set to column accordingly, with dense if it’s specified.
All other grid sub-properties are reset to their initial values.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> Sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it’s specified.
All other grid sub-properties are reset to their initial values.

Formal syntax

< 'grid-template'> | < 'grid-template-rows'> / [ auto-flow && dense? ] < 'grid-auto-columns'>? | [ auto-flow && dense? ] < 'grid-auto-rows'>? / < 'grid-template-columns'>

grid auto flow

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

Syntax

  1. /* Keyword values */
  2. grid-auto-flow: row;
  3. grid-auto-flow: column;
  4. grid-auto-flow: dense;
  5. grid-auto-flow: row dense;
  6. grid-auto-flow: column dense;

  7. /* Global values */
  8. grid-auto-flow: inherit;
  9. grid-auto-flow: unset;
  10. grid-auto-flow: initial;

The property may take one of two forms:

  • a single keyword: one of row, column, or dense.
  • two keywords: row dense or column dense.

Values

row Is a keyword specifying that the auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

column Is a keyword specifying that the auto-placement algorithm places items, by filling each column in turn, adding new columns as necessary.

dense Is a keyword specifying that the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.
If it is omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear “in order”, even if this leaves holes that could have been filled by later items.

Formal syntax

[ row | column ] || dense

grid column

The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Syntax

This property is specified as one or two < grid-line > values.

If two < grid-line > values are given they are separated by "/". The grid-column-start longhand is set to the value before the slash, and the grid-column-end longhand is set to the value after the slash.

Each < grid-line > value can be specified as:

  • either the auto keyword
  • or a < custom-ident > value
  • or an < integer > value
  • or both < custom-ident > and < integer >, separated by a space
  • or the keyword span together with either a < custom-ident > or an < integer > or both.

Values

auto Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.

< custom-ident > If there is a named line with the name '< custom-ident>-start'/' < custom-ident>-end', it contributes the first such line to the grid item’s placement.

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-column: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).

Otherwise, this is treated as if the integer 1 had been specified along with the < custom-ident>.

< integer > && < custom-ident >? Contributes the nth 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 < custom-ident >, 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 < integer > value of 0 is invalid.

span && [ < integer > || < custom-ident > ] Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. If a name is given as a < custom-ident>, 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.

If the < integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

Formal syntax

< grid-line> [ / < grid-line> ]?

where
< grid-line> = auto | < custom-ident> | [ < integer> && < custom-ident>? ] | [ span && [ < integer> || < custom-ident> ] ]

grid row

The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Syntax

  1. /* Keyword values */
  2. grid-row: auto;
  3. grid-row: auto / auto;

  4. /* < custom-ident > values */
  5. grid-row: somegridarea;
  6. grid-row: somegridarea / someothergridarea;

  7. /* < integer > + < custom-ident > values */
  8. grid-row: somegridarea 4;
  9. grid-row: 4 somegridarea / 6;

  10. /* span + < integer > + < custom-ident > values */
  11. grid-row: span 3;
  12. grid-row: span somegridarea;
  13. grid-row: 5 somegridarea span;
  14. grid-row: span 3 / 6;
  15. grid-row: span somegridarea / span someothergridarea;
  16. grid-row: 5 somegridarea span / 2 span;

  17. /* Global values */
  18. grid-row: inherit;
  19. grid-row: initial;
  20. grid-row: unset;

Values

auto Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.

< custom-ident > If there is a named line with the name '< custom-ident>-start'/' < custom-ident>-end', it contributes the first such line to the grid item’s placement.

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-column: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).

Otherwise, this is treated as if the integer 1 had been specified along with the < custom-ident>.

< integer > && < custom-ident >? Contributes the nth 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 < custom-ident >, 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 < integer > value of 0 is invalid.

span && [ < integer > || < custom-ident > ] Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. If a name is given as a < custom-ident>, 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.

If the < integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

Formal syntax

< grid-line> [ / < grid-line> ]?

where
< grid-line> = auto | < custom-ident> | [ < integer> && < custom-ident>? ] | [ span && [ < integer> || < custom-ident> ] ]

grid template

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Authors can set values for the longhand properties: grid-template-rows, grid-template-columns, and grid-template-areas.

Syntax

  1. /* Keyword value */
  2. grid-template: none;

  3. /* grid-template-rows / grid-template-columns values */
  4. grid-template: 100px 1fr / 50px 1fr;
  5. grid-template: auto 1fr / auto 1fr auto;
  6. grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
  7. grid-template: fit-content(100px) / fit-content(40%);

  8. /* Global values */
  9. grid-template: inherit;
  10. grid-template: initial;
  11. grid-template: unset;

Values

none Is a keyword that sets all three longhand properties to none, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the grid-auto-rows, grid-auto-columns properties.

<'grid-template-rows'> / <'grid-template-columns'> Sets grid-template-rows and grid-template-columns to the specified values, and sets grid-template-areas to none.

[ < line-names >? < string > < track-size >? < line-names >? ]+ [ / < explicit-track-list > ]? Sets grid-template-areas to the strings listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified).

Note: The repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

Note: The grid shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use grid (as opposed to grid-template) to prevent these values from cascading in seperately.

Formal syntax

none | [ < 'grid-template-rows'> / < 'grid-template-columns'> ] | [ < line-names>? < string> < track-size>? < line-names>? ]+ [ / < explicit-track-list> ]?

grid gap

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

CSS Grid Layout initially defined the grid-gap property. This prefixed property is being replaced by gap. However, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above.

Syntax

  1. /* One < length > value */
  2. gap: 20px;
  3. gap: 1em;
  4. gap: 3vmin;
  5. gap: 0.5cm;

  6. /* One < percentage > value */
  7. gap: 16%;
  8. gap: 100%;

  9. /* Two < length > values */
  10. gap: 20px 10px;
  11. gap: 1em 0.5em;
  12. gap: 3vmin 2vmax;
  13. gap: 0.5cm 2mm;

  14. /* One or two < percentage > values */
  15. gap: 16% 100%;
  16. gap: 21px 82%;

  17. /* calc() values */
  18. gap: calc(10% + 20px);
  19. gap: calc(20px + 10%) calc(10% - 5px);

  20. /* Global values */
  21. gap: inherit;
  22. gap: initial;
  23. gap: unset;

This property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>.

<'row-gap'> and <'column-gap'> are each specified as a < length > or a < percentage >.

Values

length Is the width of the gutter separating the grid lines.

percentage Is the width of the gutter separating the grid lines, relative to the dimension of the element.

Formal syntax

<'row-gap'> <'column-gap'>?