网格模板区 | grid-template-areas (Grid Layout)

  CSS 中文开发手册

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

grid-template-areasCSS属性指定命名网格区域。

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

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

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

这些领域不与任何特定的网格项目相关联，但可以从电网布局属性来引用grid-row-start，grid-row-end，grid-column-start，grid-column-end，和他们的速记grid-row，grid-column和grid-area。

初始值	none
适用于	网格容器
遗传	没有
媒体	视觉
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

取值

none网格容器不定义任何指定的网格区域。

<string>+为列出的每个单独的字符串创建一行，并为字符串中的每个单元格创建一个列。行内和行之间的多个命名单元标记创建一个跨越相应网格单元的命名网格区域。除非这些单元格形成一个矩形，否则该声明是无效的。

形式语法

none | <string>+

例

HTML

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

CSS

#page {
  display: grid;
   100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-template-areas' 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	44	10.3

  CSS 中文开发手册

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

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