【CSS】Grid布局4

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

---

Grid布局4

接上文

04. 子项属性

（1）网格线属性

• grid-column-start：表示当前子项的左边框，从哪一条垂直网格线开始

• grid-column-end：表示当前子项的左边框，在哪一条垂直网格线结束

• grid-row-start：表示当前子项的上边框，从哪一条水平网格线开始

• grid-row-end：表示当前子项的左边框，在哪一条水平网格线处结束

  通过上面四个属性，可以灵活的指定当前元素所占据的列或行的份数

（a）网格线序号

• 网格线的序号，从1开始，有N列，则垂直网格线就有N+1条，有M行，则水平网格线就有M+1条
• 也可以通过浏览器来查看
  • 如图：上面一排显示的就是垂直网格线的序号，左边一排显示的就是水平网格线的序号

.son1 {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: red;
}

表示son1子项占据从第1根网格线到第3根网格线的网格区域

其它的子项元素会按照既定的网格区域排版

（b）网格线命名

• 在通过grid-template-columns和grid-template-rows定义行和列时，还可以使用方括号[]，来指定每一条网格线的名称

  .father {
      grid-template-columns: [column1] 100px [column2] 100px [column3] 100px;
      grid-template-rows: [row1] 100px [row2] 100px [row3] 100px;
  }
  

  表示第一条垂直网格线的名称为column1，第二条垂直网格线的名称为column2，...

• 在网格线命名的基础上，我们也可以指定网格线名称来代替网格序号

  .son1 {
      grid-row-start: row1;
      grid-row-end: row3;
      background-color: red;
  }
  

  

（c）网格线关键字

• 除了序号和命名之外，还可以通过span关键字，来表示当前元素占据了多少个单元格

  .son1 {
      grid-column-start: span 3;
      background-color: red;
  }
  

  表示son1跨越了3个单元格

  如果跨越的单元格超出设置的网格区域，则会自动补全超出的区域

  grid-column-start表示其开始边框距离结束边框跨越了3个单元格

  如果是grid-column-end，则表示其结束边框距离开始边框跨越了3个单元格

  

（2）网格线简写属性

• grid-column：是grid-column-start和grid-column-end的简写形式

• grid-row：是grid-row-start和grid-row-end的简写形式

  • 以上代码可表述为：

    .son1 {
        grid-column: 1 / 3;
    }
    /* 同样支持命名 */
    .son1 {
        grid-row: row1 / row3;
    }
    /* 同样支持 span */
    .son1 {
        grid-column: 1 / span 3;
    }
    

（3）网格区域属性

• grid-area：通过这个属性来指定子项元素占据的网格区域

  • 同时，这个属性也是4个网格线属性的简写形式

    注：组成的区域必须是规则区域，否则，按照设置的、最小的、能生效的、规则区域显示

  .son1 {
      grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  }
  

  .son1 {
      grid-area: 1 / 1 / 3 / 3;
      background-color: red;
  }
  

  

（4）布局属性

• justify-self ：设置子项在单元格内的水平位置

• align-self：设置子项在单元格内的垂直位置

• place-self：是上面两个属性的简写形式place-self: <align-self> <justify-self>;

  属性值：

  start：居左/居上

  end：居右/居下

  center：居中

  stretch：拉伸

  .son1 {
      width: 50px;
      height: 50px;
      grid-area: 1 / 1 / 3 / 3;
      justify-self: center;
      align-self: center;
      /* place-self: center center; */
      background-color: red;
  }
  

  

05. 练习

.father {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: repeat(5, 100px);
    gap: 10px;
}
/* 略去样式设置 */
.son1 {
    grid-area: 1 / 1 / 1 / 1;
}
.son2 {
    grid-area: 1 / 2 / 4 / 3;
}
.son3 {
    grid-area: 1 / 3 / 2 / 5;
}
.son4 {
    grid-area: 1 / 5 / 2 / 6;
}
.son5 {
    grid-area: 2 / 1 / 4 / 2;
}
.son6 {
    grid-area: 2 / 3 / 3 / 6;
}
.son7 {
    grid-area: 3 / 3 / 4 / 4;
}
.son8 {
    grid-area: 3 / 4 / 6 / 5;
}
.son9 {
    grid-area: 3 / 5 / 5 / 6;
}
.son10 {
    grid-area: 4 / 1 / 5 / 4;
}
.son11 {
    grid-area: 5 / 1 / 6 / 2;
}
.son12 {
    grid-area: 5 / 2 / 6 / 4;
}
.son13 {
    grid-area: 5 / 5 / 6 / 6;
}

---