Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

grid

Dit artikel heeft een technische beoordeling nodig. Hoe u kunt helpen.

Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

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), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

If the <'grid-auto-columns'> value is omitted, it is set to the value specified value for <'grid-auto-rows'>. Other omitted values are set to their initial values.

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 reset by this shorthand, even though they can’t be set by it.

Initial valueas each of the properties of the shorthand:
Applies togrid containers
Inheritedno
Percentagesas each of the properties of the shorthand:
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* <'grid-template'> values */
grid: none;
grid: subgrid;
grid: 100px 1fr;
grid: [linename1] 100px [linename2 linename3];
grid: 200px repeat(auto-fill, 100px) 300px;
grid: minmax(100px, max-content) repeat(auto-fill, 200px) 20%;
grid: grid-template: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* <'grid-auto-flow'> values */
grid: row;
grid: column;
grid: dense;
grid: row dense;
grid: column dense;

/* <'grid-auto-flow'> + <'grid-auto-rows'> /
   <'grid-auto-columns'> values */
grid: row 200px;
grid: column 80vmax;
grid: row dense 30em;
grid: column dense min-content;
grid: dense minmax(300px, max-content);
grid: row 400px / 40%;
grid: column auto / minmax(mix-content, 1fr);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Values

See the values for the longhands grid-template, grid-auto-flow, grid-auto-rows, grid-auto-columns.

<'grid-template'>
Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
<'grid-auto-flow'>
Defines the grid-auto-flow controlling how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
<'grid-auto-rows'>
Defines the grid-auto-rows, specifying the size of implicitly-created grid row tracks.
<'grid-auto-columns'>
Defines the grid-auto-columns, specifying the size of implicitly-created grid column tracks.

Formal syntax

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

Examples

FIXME:

Specifications

Specification Status Comment
CSS Grid Layout
The definition of 'grid' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support 29.0[1] 40.0 (40.0)[2] No support[3] No support 28.0[1] Nightly build-webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support[3] No support No support

[1] Implemented behind the experimental Web Platform features flag in chrome://flags.

[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false.

[3] Internet Explorer implements an older version of the specification, which doesn't define the grid shorthand.

See also

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: rolfedh, Sebastianz
 Laatst bijgewerkt door: rolfedh,