• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • grid-template

    版本:CSS3

    grid-template,CSS属性简写,用以定义网格中行、列与分区。

    示例

    /* 值为关键词 */
    grid-template: none;
    
    /* 为 grid-template-rows / grid-template-columns */
    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 */
    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;
    
    /* 为全局值 */
    grid-template: inherit;
    grid-template: initial;
    grid-template: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE不支持grid-template,其余浏览器都支持grid-template

    语法

    grid-template:none| <grid-template-rows>/ <grid-template-columns>|[<line-names>?<string><track-size>?<line-names>?]+[ /<explicit-track-list>]?

    取值

    实例

    #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;
    }
    
    
    <section id="page">
      <header>Header</header>
      <nav>Navigation</nav>
      <main>Main area</main>
      <footer>Footer</footer>
    </section>
    
    
    grid-template: 
                "a a a" 40px
                "b c c" 40px
                "b c c" 40px / 1fr 1fr 1fr;
    
    grid-template: 
                "b b a" auto
                "b b c" 2ch
                "b b c" 1em / 20% 20px 1fr;
    grid-template: 
                "a a ." minmax(50px, auto)
                "a a ." 80px
                "b b c" auto / 2em 3em auto;
    

    上篇:grid

    下篇:row-gap