乐趣区

Grid-布局

1:基本布局

Grid 布局是二维的基于网格的布局系统,它可以同时处理列和行(这是对比 flex 弹性盒模型布局而言);第一个专门为解决布局问题而生的 CSS 模块。

几个基本概念:

Grid Container,又叫做 Grid 容器,就是设置了 display:grid 的元素。

    .main{display:grid;}

Grid Item,又叫做 Grid 容器成员,Grid 容器下面的直接子元素。

Gird Line,Grid 容器行和列的网格线;它又分为垂直网格线(column grid lines)和水平网格线(row grid lines)。

Gird Track,两个相邻网格线之间的空间。

Grid Cell,两个相邻的行和两个相邻的列网格线之间的空间,基础单元。

Grid Area,四个网格线包围的总空间,可以由任意数量的 Grid Cell 组成。

2:浏览器兼容

3:Grid 容器 (Grid Container) 属性

常用的属性有 14 个:

  • display,分为 grid(块级网格)和 inline-grid(行级网格)

      .main {display: grid;}
          .main {display: inline-grid;}
  • grid-template-columns/rows,定义了网格的行和列

    .main{grid-template-columns: [<Grid Line Name>] <Grid Track Size> ...;
         grid-template-rows: [<Grid Line Name>] <Grid Track Size> ...;
    }

    基本语法

    .main {
        display: grid;
        grid-template-columns: [columns-1] 100px [columns-2] 200px auto;
        grid-template-rows: [rows-1] 100px [rows-2] 200px;
    }

    重复

    .main {
        display: grid;
        grid-template-columns: repeat(4, 100px [columns]) auto;
        grid-template-rows: repeat(4, 100px [rows]);
    }

    自由空间,给定比例,自由分配空间

    .main {
        display: grid;
        grid-template-columns: 100px 1fr 3fr;
        grid-template-rows: 100px 1fr 3fr;
    }
  • grid-template-areas(定义网格模板)

      .header {
          grid-area: header;
          background: #8A469B;
      }
      .left {
          grid-area: left;
          background: #EA7F26;
      }
      .right {
          grid-area: right;
          background: #EA7F26;
      }
      .footer {
          grid-area: footer;
          background: #8A469B;
      }
      .main {
          height: 500px;
          display: grid;
          // 纵向分成了 5 个
          grid-template-columns: 100px 100px auto 100px 100px;
          // 横向分成 3 个
          grid-template-rows: 100px auto 100px;;
          grid-template-areas:
              "header header header header header"
              "left left . . right"
              "footer footer footer footer footer";
      }
  • grid-template(grid-template-rows、grid-template-column、grid-template-areas 的简写)

      .main {
           height: 500px;
           display: grid;
           grid-template:
              [title-left] "title title title" 80px [title-right]
               [content-left] "left content content" 1fr [content-right]
               [footer-left] "left footer footer" 80px [footer-right]/ 120px 1fr 120px;
      }
  • grid-column/row-gap(网格线的宽度 / 高度)

      .main {
          display: grid;
          grid-template-columns: 100px 200px auto;
          grid-template-rows: 100px 200px;
          grid-column-gap: 20px;
          grid-row-gap: 20px;
      }
  • grid-gap(网格线的宽度 / 高度简写形式)

      .main {
          display: grid;
          grid-template-columns: 100px 200px auto;
          grid-template-rows: 100px 200px;
          grid-gap: 20px 30px;
      }
  • justify-items(元素在 Grid Cell 横轴上的对齐方式,出现的前提是元素要小于 Grid Cell 的尺寸),它一共有 4 个值:start、end、center、stretch(默认);stretch 使用时要去掉元素的宽度,不然无效。

      .main {
          display: grid;
          justify-items: start;
      }
  • align-items(元素在 Grid Cell 纵轴上的对齐方式),同上 justify-item 一样也是有四个属性值相同。

      .main {
          display: grid;
          align-items: start;
      }
  • justify-content(Grid Cell 在横轴上的对齐方式),它一共有 7 个值:start、end、center、stretch、space-around、space-between、space-evenly。

      .main {
          display: grid;
          justify-content: start;
      }
  • align-content(Grid Cell 在纵轴上的对齐方式),同上。

      .main {
          display: grid;
          align-content: start;
      }
  • grid-auto-columns/rows(自动生成网格 (隐式),出现场景:网格溢出时子元素超过父元素使用)
    基本语法

      .main {
          display: grid;
          grid-auto-columns: <Grid Track Size> ...;
          grid-auto-rows: <Grid Track Size> ...;
      }

    使用的情况分为两种:不指定 grid-auto-columns 和指定 grid-auto-columns。

  • grid-auto-flow(自动放置 Grid 容器成员,出现的前提是不指定 grid-template-areas,不指定每个元素的放法),它有三个值:row(按行填充)、column(按列填充)、dense(按最小剩余空间填充)

    .main {
        display: grid;
        grid-auto-flow: row;
    }
  • grid(template-rows、template-columns、template-areas、auto-rows、auto-columns、auto-flow 简写)

      .main {grid: [row1-start] "header header header" 1fr [row1-end]
                [row2-start] "footer footer footer" 25px [row2-end]/ auto 50px auto;
      }

4:Grid 容器成员 (Grid Item) 属性

常用属性有 9 个:

  • grid-column-start/end(根据网格线确定 Grid Item 位置),它一共有四个值:number、name、span number(跨过几条网格线)、span name(跨越到哪一根网格线)。

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
      .item {
          grid-column-start: 2;
          grid-column-end: span 4;
      }
  • grid-row-start/end(根据网格线确定 Grid Item 位置)

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
      .item {
          grid-row-start: span 2;
          grid-row-end: 4;
      }
  • grid-column/row(grid-column/row-start/end 简写)

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }
      .item {
          grid-column: span 2 / 4;
          grid-row: 1 / 4;
      }
  • grid-area(创建区域),分为两种情况:命名引用和直接定义。
    命名引用 grid-area:name;
    直接定义 grid-area: name | row-start | column-start | row-end | column-end

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }
      .item {
          grid-area: item;
          grid-area: 3 / 1 / 4 / 6;
      }
  • justify-self(元素在 Grid Cell 横轴上的对齐方式 – 只对单个元素),它一共有四个值:start、end、center、stretch。

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
      .item {justify-self: start;}
  • align-self(元素在 Grid Cell 纵轴上的对齐方式 – 只对单个元素生效),同上。

      .main {
          display: grid;
          grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
      .item {align-self: start;}

5:Grid 网格布局注意事项

  • Grid 网格布局适用于页面整体布局
  • Grid 容器成员添加 float、table-cell、inline-block 属性无效
  • 不推荐中文命名,中文命名会出现乱码导致 name 无法匹配
退出移动版