首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网格 | grid

gridCSS属性是一个简写属性,并将所有明确的网格特性(grid-template-rowsgrid-template-columns,和grid-template-areas),所有的隐含网格属性(grid-auto-rowsgrid-auto-columns,和grid-auto-flow),以及排水沟性能(grid-column-gapgrid-row-gap在一个单一的声明)。

代码语言:javascript
复制
/* <'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*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
代码语言:txt
复制
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*参考内容区域的相应维度
代码语言:txt
复制
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*指定的百分比或绝对长度
代码语言:txt
复制
Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

句法

取值

<'grid-template'>定义grid-template包括grid-template-columnsgrid-template-rowsgrid-template-areas<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?经由明确设置的行迹设置了一个自动流动grid-template-rows性(和grid-template-columns财产none),并通过指定如何自动重复列轨道grid-auto-columns(和设置grid-auto-rowsauto)。grid-auto-flow也相应地设置columndense如果指定的话。

所有其他grid子属性被重置为它们的初始值。

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>通过设置列设置了一个自动流通过明确跟踪grid-template-columns性能(和grid-template-rows财产none),并通过指定如何自动重复的行轨道grid-auto-rows(与设置grid-auto-columnsauto)。grid-auto-flow也相应地设置rowdense如果指定的话。

所有其他grid子属性被重置为它们的初始值。

形式语法

代码语言:javascript
复制
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

HTML内容

代码语言:javascript
复制
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS内容

代码语言:javascript
复制
#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

扫码关注腾讯云开发者

领取腾讯云代金券