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

  •   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;
      width: 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 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32207.html

    posted on 2020-07-02 22:41  MrAit  阅读(464)  评论(0编辑  收藏  举报

    导航