CSS Grid Layout | CSS Features

`fit-tolerance`

Property Limited availability Experimental Modern CSS: Grid lanes

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

normal | <length-percentage [0,∞]> | infinite

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: grid lanes containers
Inherited: no
Percentages: relative to the grid-axis content box size of the grid lanes container
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: as length

Browser support

First browser version supporting fit-tolerance
Chrome	No
Edge	No
Firefox	No
Safari	26.4
Chrome Android	No
Safari iOS	26.4

First version with support, from MDN browser-compat-data.

Specification ↗

`grid`

Property Baseline: widely availablesince January 2018

MDN The grid CSS media feature can be used to test whether the output device uses a grid-based screen.

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: grid containers
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow

Browser support

First browser version supporting grid
Chrome	1
Edge	12
Firefox	2
Safari	3
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-area`

Property Baseline: widely availablesince April 2020

MDN The grid-area CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-template-areas:
    "a a a"
    "b c c"
    "b c c";
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Example</div>
  </div>
</section>

Syntax

<grid-line> [ / <grid-line> ]{0,3}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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
Canonical order: per grammar
Animation type: discrete
Longhands: grid-row-start, grid-column-start, grid-row-end, grid-column-end

Browser support

First browser version supporting grid-area
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-auto-columns`

Property Baseline: widely availablesince April 2020

MDN The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element > div:nth-child(1) {
  grid-column: 1 / 3;
}

#example-element > div:nth-child(2) {
  grid-column: 2;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div></div>
    </div>
  </div>
</section>

Syntax

<track-size>+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: grid containers
Inherited: no
Percentages: see Track Sizing
Computed value: see Track Sizing
Canonical order: per grammar
Animation type: if the list lengths match, by computed value type per item; discrete otherwise

Browser support

First browser version supporting grid-auto-columns
Chrome	57
Edge	16
Firefox	70
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-auto-flow`

Property Baseline: widely availablesince April 2020

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

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element > div:nth-child(1) {
  grid-column: auto / span 2;
}

#example-element > div:nth-child(2) {
  grid-column: auto / span 2;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

[ row | column ] || dense

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: row
Applies to: grid containers
Inherited: no
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting grid-auto-flow
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-auto-rows`

Property Baseline: widely availablesince April 2020

MDN The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  font-size: 22px;
}

#example-element div:last-child {
  font-size: 13px;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

<track-size>+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: grid containers
Inherited: no
Percentages: see Track Sizing
Computed value: see Track Sizing
Canonical order: per grammar
Animation type: if the list lengths match, by computed value type per item; discrete otherwise

Browser support

First browser version supporting grid-auto-rows
Chrome	57
Edge	16
Firefox	70
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-column`

Property Baseline: widely availablesince April 2020

MDN The grid-column CSS shorthand property specifies a grid item's size and location within a 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.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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
Canonical order: per grammar
Animation type: discrete
Longhands: grid-column-start, grid-column-end

Browser support

First browser version supporting grid-column
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-column-end`

Property Baseline: widely availablesince April 2020

MDN The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

<grid-line>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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

Browser support

First browser version supporting grid-column-end
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-column-start`

Property Baseline: widely availablesince April 2020

MDN The grid-column-start CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

<grid-line>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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

Browser support

First browser version supporting grid-column-start
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-row`

Property Baseline: widely availablesince April 2020

MDN The grid-row CSS shorthand property specifies a grid item's size and location within a 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.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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
Canonical order: per grammar
Animation type: discrete
Longhands: grid-row-start, grid-row-end

Browser support

First browser version supporting grid-row
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-row-end`

Property Baseline: widely availablesince April 2020

MDN The grid-row-end CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

<grid-line>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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

Browser support

First browser version supporting grid-row-end
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-row-start`

Property Baseline: widely availablesince April 2020

MDN The grid-row-start CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

Live preview Example from MDN

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

Syntax

<grid-line>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

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

Browser support

First browser version supporting grid-row-start
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-template`

Property Baseline: widely availablesince April 2020

MDN The grid-template CSS shorthand property specifies the grid columns, grid rows, and grid areas.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 200px;
}

#example-element :nth-child(1) {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  grid-area: a;
}

#example-element :nth-child(2) {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
  grid-area: b;
}

#example-element :nth-child(3) {
  background-color: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-area: c;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: grid containers
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: grid-template-rows, grid-template-columns, grid-template-areas

Browser support

First browser version supporting grid-template
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-template-areas`

Property Baseline: widely availablesince April 2020

MDN The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

#example-element :nth-child(1) {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  grid-area: a;
}

#example-element :nth-child(2) {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
  grid-area: b;
}

#example-element :nth-child(3) {
  background-color: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-area: c;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One (a)</div>
      <div>Two (b)</div>
      <div>Three (c)</div>
    </div>
  </div>
</section>

Syntax

none | <string>+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: grid containers
Inherited: no
Percentages: n/a
Computed value: the keyword none or a list of string values
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting grid-template-areas
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-template-columns`

Property Baseline: widely availablesince April 2020 Modern CSS: Subgrid

MDN The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: grid containers
Inherited: no
Percentages: refer to corresponding dimension of the content area
Computed value: the keyword none or a computed track list
Canonical order: per grammar
Animation type: if the list lengths match, by computed value type per item in the computed track list (see § 7.2.5 Computed Value of a Track Listing and § 7.2.3.3 Interpolation/Combination of repeat()); discrete otherwise

Browser support

First browser version supporting grid-template-columns
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`grid-template-rows`

Property Baseline: widely availablesince April 2020 Modern CSS: Subgrid

MDN The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: grid containers
Inherited: no
Percentages: refer to corresponding dimension of the content area
Computed value: the keyword none or a computed track list
Canonical order: per grammar
Animation type: if the list lengths match, by computed value type per item in the computed track list (see § 7.2.5 Computed Value of a Track Listing and § 7.2.3.3 Interpolation/Combination of repeat()); discrete otherwise

Browser support

First browser version supporting grid-template-rows
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`fit-content()`

Function Baseline: widely availablesince April 2020

MDN The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One. This column has more text in it.</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

/* for grid-template-columns, grid-template-rows */
fit-content( <length-percentage> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting fit-content()
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Defined for

grid-template-columns, grid-template-rows

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`minmax()`

Function Baseline: widely availablesince April 2020

MDN The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.

Live preview Example from MDN

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One. This column has more text in it.</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

Syntax

/* for grid-template-columns, grid-template-rows */
minmax(min, max)

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting minmax()
Chrome	57
Edge	16
Firefox	52
Safari	10.1
Chrome Android	57
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Defined for

grid-template-columns, grid-template-rows

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`<flex>`

Type Baseline: widely availablesince April 2020

Spec A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.

MDN The <flex> CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.

Browser support

First browser version supporting <flex>
Chrome	29
Edge	12
Firefox	40
Safari	10.1
Chrome Android	29
Safari iOS	10.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Defined for

Browser support