grid 布局的使用

grid 布局的使用
   css 网格布局,是一种二维布局系统。
   浏览器支持情况:老旧浏览器不支持,
   概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。
      <div class="container">
         <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3"></div>
       </div>
    网格项。网格容器的子元素。
      <div class="container">
        <div class="item "></div>
         <div class="item "></div>
        <div class="item"></div>
       </div>
    网格线。组成网格线的分界线,他们可以是列网格线,也可以是行网格线
    网格轨道。两个相邻的网格线之间为网格轨道,可以认为是网格的行列或者行。
    网格单元。两个相邻的列网格线和两个相邻的网格线组成的网格单元,它是最小的网格单元。
    网格区。网格区是由任意数量网格单元组成。
  设置在网格容器上的属性
    注:当元素设置了网格布局,column、float、clear、vertical-align属性无效
    1. display: grid | inline-grid | subgrid;
      属性值: grid: 生成块级网络
      inline-grid: 生成行内网格
      subgrid: 如果容器本身是网格项,用来继承父容器的行列大小。
    
    2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
      grid-template-rows: <track-size> ... | <line-name> <track-size>
      设置行和列的大小。
        属性值: track-size: 轨道大小,可以使用css长度,百分比或用分数。
            line-name:网格线名字,可以选择任意名字。
          当设置行或者列大小为auto 时,网格会自动分配空间和网格名称。
          .container{
             display:grid;
             grid-template-columns: 40px 50px auto 50px 40px;
             grid-template-rows: 25% 100px auto;
           }
      可以给网格线定义名字.
          .container{
            display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start]
              50px [five] 40px [end];
             grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]
            auto [last-line];
           }
      用fr单位可以将容器分为几等份,例如下面分成三等份
       .container{
             display:grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
    3.grid-template-areas
      通过获取网格项中的grid-area属性值(名称),来定义网格模版。
      重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。
        属性值: grid-area-name: 网格项的grid-area属性值(名字)‘.’ : 空网格单元 none: 不定义网格区域
        .item-a{ grid-area: header; }
          .item-b{ grid-area: main; }
          .item-c{ grid-area: sidebar; }
          .item-d{ grid-area: footer; }
          .container{
              display:grid;
              grid-template-columns: 50px 50px 50px 50px;
              grid-template-rows: auto;
              grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" 
            }
    4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
        网格单元间距
        属性值:line-size: 网格线间距,设置单位值
       .container{
          display:grid;
          grid-template-columns: 100px 50px 100px;
          grid-template-rows: 80px auto 80px;
          grid-column-gap: 10px; grid-row-gap: 15px;
        }
    5. grid-gap:<grid-column-gap> <grid-row-gap>;
      是grid-column-gap 和 grid-row-gap简写。
        .container{
          display:grid;
          grid-template-columns: 100px 50px 100px;
          grid-template-rows: 80px auto 80px;
          grid-gap: 10px 15px;
        }
    6. justify-items: start | end | center | stretch(默认) ;
      垂直于列网格线对齐,适用于网格容器里的所有网格项。
        属性值:
          start: 左对齐。
          end: 右对齐。
          center: 居中对齐。
          stretch: 填满(默认)。
          .container{
             display:grid;
            justify-items: start;
           }
    7. align-items: start | end | center | stretch ;
        垂直于行网格线对齐,适用于网格容器里的所有网格项。
        属性值:
          start: 顶部对齐。
          end: 底部对齐。
          center: 居中对齐。
          stretch:填满(默认)。
    8. justify-content: start | end | center | stretch | space-around |
        space-between | space-evenly ;
      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容
        器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。
      属性值: start: 左对齐。 end: 右对齐。 center: 居中对齐。
          stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
             space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
      .container{ display:grid; justify-content: start; }
    9. align-content: start | end | center | stretch | space-around |
        space-between | space-evenly ;
      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格
        容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。
          属性值: start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。
               stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
              space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
      .container{ display:grid; align-content: start; }
    10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
      自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器
      范围时,将自动创建隐式网格轨道.
      属性值:track-size: 网格轨道大小,可以是固定值,百分比或者是
      分数(fr单位)。
      .container{
          display:grid;
          grid-template-columns: 60px 60px;
          grid-template-rows: 90px 90px
       }
    11. grid-auto-flow : row(默认) | column | dense ;
      在没有设置网格项的位置时,这个属性控制网格项怎样排列
        属性值:
          row: 按照行依次从左到右排列。
          column: 按照列依次从上倒下排列。
          dense: 按先后顺序排列。
 
设置在网格项上的属性
    1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;    
         grid-column-end: <number> | <name> | span <number> | span <name> | auto ;    
         grid-row-start: <number> | <name> | span <number> | span <name> | auto ;    
         grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
    通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的
      开始位置,grid-column-end、grid-row-end定义网格项的结束位置。
      属性值: line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。
       span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置,默认跨度为1。
        .item-a{
             grid-column-start: 2;
            grid-column-end: five;
             grid-row-start: row1-start grid-row-end: 3
        }
    2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;      
      grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
        是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。
        .item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }
    3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
      定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
        属性值: name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:
      可以是数字或网格线名字。
        例子: 定义网格项名字:
            .item-d{ grid-area: header }
            通过网格线定位网格项:
            .item-d{
              grid-area: 1 / col4-start / last-line / 6 ;
            }
    4. justify-self: justify-self: start | end | center | stretch;
      定义单个网格项垂直于列网格线的对齐方式。
      属性值: start: 网格区域左对齐。 end: 网格区域右对齐。
           center: 网格区域居中。 stretch: 网格区域填满。
      
    5. align-self: start | end | center | stretch;
      定义单个网格项垂直于行网格线的对齐方式。
      属性值:
        start: 网格区域顶部对齐。
        end: 网格区域底部对齐。
        center: 网格区域居中。
        stretch: 网格区域填满。

posted @ 2017-12-06 10:44  柠檬先生  阅读(2201)  评论(0编辑  收藏  举报