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

  CSS 中文开发手册

网格模板 | grid-template (Grid Layout) - CSS 中文开发手册

grid-templateCSS属性是定义一个网格列，行和领域的速记属性。

/* 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;

可以为速记属性值：grid-template-rows，grid-template-columns，和grid-template-areas。

初始值	作为简写的每个属性：grid-template-columns：none grid-template-rows：none grid-template-areas：none
适用于	网格容器
遗传	没有
百分比	作为简写的每一个属性：grid-template-columns：引用内容区域的相应尺寸grid-template-rows：引用内容区域的对应尺寸
媒体	视觉
计算值	作为简写的每个属性：grid-template-columns：按照规定，但相对长度转换为绝对长度grid-template-rows：按指定，但相对长度转换为绝对长度grid-template-areas：as规定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

grid-template-columns*nonegrid-template-rows*nonegrid-template-areas*none

Applies to grid containers   [Inherited](inheritance) no   Percentages as each of the properties of the shorthand:

grid-template-columns*参考内容区域的相应维度grid-template-rows*参考内容区域的相应维度

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

grid-template-columns：：按规定，但相对长度转换为绝对长度grid-template-rows：：按规定，但相对长度转换为绝对长度grid-template-areas*具体规定

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

取值

none是一个将所有三个longhand属性设置为的关键字none，这意味着没有明确的网格。没有命名的网格区域。行和列将隐式生成; 他们的大小将由grid-auto-rows和grid-auto-columns属性决定。<'grid-template-rows'> / <'grid-template-columns'>设置grid-template-rows和grid-template-columns指定的值，并设置grid-template-areas为none。[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?设置grid-template-areas为列出的字符串，grid-template-rows每个字符串后面的轨道大小（填充auto任何缺少的大小），并在每个大小之前/之后定义的命名行中拼接，以及grid-template-columns在斜杠后面指定的轨道列表（或者none，如果未指定）。

注：repeat()函数在这些轨道列表中是不允许的，因为这些轨道是为了直观地将一对一地与“ASCII art”中的行/列对齐。

注：该grid速记接受相同的语法，但也复位隐含网格属性为初始值。使用grid（而不是grid-template）来防止这些值单独级联。

形式语法

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?where 
<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>?
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

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

实例

CSS

#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;
}

HTML

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-template' 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	No support5

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	44	No support

  CSS 中文开发手册

  本文标题：网格模板 | grid-template (Grid Layout) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32201.html