从零开始学习 grid 网格布局

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

grid 网格概念

• CSS 网格是一个用于 web 的二维布局系统。利用网格，可以把内容按照行于列的格式进行排版。还能非常轻松地实现一些复杂的布局。

定义网格及 fr 单位

• grid-template-rows grid-template-columns：基于网格行和列的维度，定义网格线的名称和网络轨道的尺寸大小

  <div class="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
  </div>
  

  • 定义三行三列宽高都是50px的布局

  .main {
      width: 300px;
      height: 300px;
      background: skyblue;
      display: grid;
      grid-template-rows: 50px 50px 50px;
      grid-template-columns: 50px 50px 50px;
  }
  .main div {
      text-align: center;
      border: 1px dashed #f2f2f2;
      background: pink;
  }
  

  

  • 定义三行三列高分别是50px、20%、auto的布局

  .main {
      grid-template-rows: 50px 20% auto;
      grid-template-columns: 50px 50px 50px;
  }
  

  

  • fr：相对于父元素的占比

  /* 平均分 */
  .main {
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  }
  

  

  ---

  .main {
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 2fr 1fr;
  }
  

  

  ---

  .main {
      grid-template-rows: 2fr 1fr 1fr;
      grid-template-columns: 1fr 2fr 1fr;
  }
  

  

合并网格及网格命名

• grid-template-areas：使用命名方式定义网格区域，需配合 grid-area 属性进行使用

  <div class="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
  </div>
  

  • 定义 a1 占四格，a2 占两格，a3 占三格

  .main {
      width: 300px;
      height: 300px;
      background: skyblue;
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "a1 a1 a2"  /* 关键 */
                           "a1 a1 a2"
                           "a3 a3 a3";
  }
  .main div {
      text-align: center;
      border: 1px dashed #f2f2f2;
      background: pink;
  }
  /* 关键 */
  .main div:nth-of-type(1) {
      grid-area: a1;
  }
  .main div:nth-of-type(2) {
      grid-area: a2;
  }
  .main div:nth-of-type(3) {
      grid-area: a3;
  }
  

  

  

  第一张图是 main 分成了九格，第二张图是按照 grid-template-areas 布局，1占四格、2占两格，3占三格。

• grid-template：grid-template-rows grid-template-columns grid-template-areas 属性的简写

  .main {
      width: 300px;
      height: 300px;
      background: skyblue;
      display: grid;
      /* 前三行对应的是行，第四行对应的是列，需要在前面加上“/” */
      grid-template: "a1 a1 a2" 1fr
                     "a1 a1 a2" 1fr
                     "a3 a3 a3" 1fr
                     / 1fr 1fr 1fr;
  }
  .main div {
      text-align: center;
      border: 1px dashed #f2f2f2;
      background: pink;
  }
  .main div:nth-of-type(1) {
      grid-area: a1;
  }
  .main div:nth-of-type(2) {
      grid-area: a2;
  }
  .main div:nth-of-type(3) {
      grid-area: a3;
  }