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

    版本:CSS3

    grid 是一个CSS简写属性,可以用来设置以下属性:显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas,隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow,间距属性 grid-column-gap 和 grid-row-gap。

    示例

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

    浏览器支持

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

    语法

    grid:<grid-template>| <grid-template-rows>/[ auto-flow && dense?] <grid-auto-columns>?|[ auto-flow && dense?] <grid-auto-rows>?/ <grid-template-columns>

    取值

    实例

    #container {
      display: grid;
      grid: repeat(2, 60px) / auto-flow 80px;
    }
    
    #container > div {
      background-color: #8ca0ff;
      width: 50px;
      height: 50px;
    }
    
    
    <div id="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    

    grid网格布局效果图

    grid: auto-flow / 1fr 1fr 1fr;
    grid: auto-flow dense / 40px 40px 1fr;
    grid: repeat(3, 80px) / auto-flow;
    

    下篇:row-gap