网格 | grid (Grid Layout) - CSS 中文开发手册 - Break易站

• 网格 | grid (Grid Layout) - CSS 中文开发手册
  gridCSS属性是一个简写属性，并将所有明确的网格特性（grid-template-rows，grid-template-columns，和grid-template-areas），所有的隐含网格属性（grid-auto-rows，grid-auto-columns，和grid-auto-flow），以及排水沟性能（grid-column-gap和grid-row-gap在一个单一的声明）。
  /* <'grid-template'> values */grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content); /* Global values */ grid: inherit; grid: initial; grid: unset;
• 
  
• 注意：只能在单个声明中指定显式或隐式网格属性grid。你没有指定的子属性被设置为它们的初始值，正如对于短手一样。此外，排水沟属性通过这种简写方式重置，即使它们不能被设置。
  
  

初始值

as each of the properties of the shorthand: grid-template-rows: none grid-template-columns: none grid-template-areas: none grid-auto-rows: auto grid-auto-columns: auto grid-auto-flow: row grid-column-gap: 0 grid-row-gap: 0

应用于

grid containers

是否继承

no

百分比

as each of the properties of the shorthand: grid-template-rows: refer to corresponding dimension of the content area grid-template-columns: refer to corresponding dimension of the content area grid-auto-rows: refer to corresponding dimension of the content area grid-auto-columns: refer to corresponding dimension of the content area

适用媒体

visual

计算值

as each of the properties of the shorthand: grid-template-rows: as specified, but with relative lengths converted into absolute lengths grid-template-columns: as specified, but with relative lengths converted into absolute lengths grid-template-areas: as specified grid-auto-rows: the percentage as specified or the absolute length grid-auto-columns: the percentage as specified or the absolute length grid-auto-flow: as specified grid-column-gap: the percentage as specified or the absolute length grid-row-gap: the percentage as specified or the absolute length

动画类型

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

grid-template-rows*nonegrid-template-columns*nonegrid-template-areas*nonegrid-auto-rows*autogrid-auto-columns*autogrid-auto-flow*rowgrid-column-gap*0grid-row-gap*0
Applies to grid containers [Inherited](inheritance) no Percentages as each of the properties of the shorthand:
grid-template-rows*参考内容区域的相应维度grid-template-columns*参考内容区域的相应维度grid-auto-rows*参考内容区域的相应维度grid-auto-columns*参考内容区域的相应维度
Media visual [Computed value](computed_value) as each of the properties of the shorthand:
grid-template-rows：：按规定，但相对长度转换为绝对长度grid-template-columns：：按规定，但相对长度转换为绝对长度grid-template-areas*具体规定grid-auto-rows*指定的百分比或绝对长度grid-auto-columns*指定的百分比或绝对长度grid-auto-flow*具体规定grid-column-gap*指定的百分比或绝对长度grid-row-gap*指定的百分比或绝对长度
Animation type discrete Canonical order the unique non-ambiguous order defined by the formal grammar
句法
取值
<'grid-template'>定义grid-template包括grid-template-columns，grid-template-rows和grid-template-areas。<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?经由明确设置的行迹设置了一个自动流动grid-template-rows性（和grid-template-columns财产none），并通过指定如何自动重复列轨道grid-auto-columns（和设置grid-auto-rows到auto）。grid-auto-flow也相应地设置column，dense如果指定的话。
所有其他grid子属性被重置为它们的初始值。
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>通过设置列设置了一个自动流通过明确跟踪grid-template-columns性能（和grid-template-rows财产none），并通过指定如何自动重复的行轨道grid-auto-rows（与设置grid-auto-columns到auto）。grid-auto-flow也相应地设置row，dense如果指定的话。
所有其他grid子属性被重置为它们的初始值。
形式语法
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
例
HTML内容
<div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS内容
#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; }
结果
规范

Specification

Status

Comment

CSS Grid LayoutThe definition of 'grid' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

57.01

No support3

52.0 (52.0)2

No support3

444

10.1

Feature

Android Webview

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

57.01

57.01

52.0 (52.0)2

No support3

10.3