We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


网格模板 (grid-template) CSS属性是一个缩写 (shorthand) 属性,用于定义 grid columns, rows 和areas

/* Keyword value */
grid-template: none;

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

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;

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

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

初始值as each of the properties of the shorthand:
适用元素grid containers
Percentagesas each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar



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 and 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> ]?

<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

<length-percentage> = <length> | <percentage>



#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left]   "nav  main" 1fr  [main-right]
                 [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;

header {
  background-color: lime;
  grid-area: head;

nav {
  background-color: lightblue;
  grid-area: nav;

main {
  background-color: yellow;
  grid-area: main;

footer {
  background-color: red;
  grid-column: foot;


<section id="page">
  <main>Main area</main>



Specification Status Comment
CSS Grid Layout
Candidate Recommendation Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] 未实现[3] 52.0 (52.0)[2] 未实现[3] 44[4] 未实现[5]
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57.0[1] 57.0[1] 52.0 (52.0)[2] 未实现[3] 44 未实现

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

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) the fit-content() function is supported. And since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) the preference is enabled by default.

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this shorthand property.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

[5] Experimental implementation available in Safari Technological Preview.

See also


此页面的贡献者: xgqfrms-GitHub
最后编辑者: xgqfrms-GitHub,