Grid基础布局属性（1028）

Grid 布局基础知识（1028）

网格布局是一个基于二维网格布局的系统，以下是关于网格布局我个人的理解

grid 布局的基本术语解释:

网格容器

• 类似于 flex 布局里的容器，位置处于最外层，里面包含子项目。容器有容器的属性，项目有项目的属性。将盒子转为网格容器只需要设置如下属性：

display: grid;

网格项目

<div class="container">
  <div class="item"></div>
</div>

• 容器 container 处于外层，内层 item 属于网格项目

网格单元

• 网格单元包括单元格和网格区域

网格区域

<div class="container">
  <div class="yellow"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(3, 10em);
  place-content: center;
  .item {
    width: 5em;
    height: 5em;
    background-color: red;
  }
  .yellow {
    width: 5em;
    height: 5em;
    background-color: yellow;
  }
}

• 我们可以通过项目属性指定区域，达到如下效果

.container {
  display: grid;
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(3, 10em);
  grid-template-areas: "a a a" "b b b" "c c c"; //改变位置
  place-content: center;
  .item {
    width: 5em;
    height: 5em;
    background-color: red;
  }
  .yellow {
    width: 5em;
    height: 5em;
    background-color: yellow;
    grid-area: b; //改变位置
  }
}

网格轨道

• 网格中的每一行叫行轨道，列叫列轨道

轨道间隙

我们通过容器属性 gap 指定行间隙 和 列间隙，效果如下

gap: 0.5em 1em;

实例演示今晚学到的全部 grid 新属性

<div class="container">
      <div class="yellow"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

.container {
  display: grid;
  // 显示网格单元
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(3, 10em);
  grid-template-areas: "a a a" "b b b" "c c c"; //网格区域
  place-content: center;
  gap: 0.5em 1em;
  // 隐式网格单元
  grid-auto-flow: row; //默认排列方式左右 设置隐士单元高度
  grid-auto-rows: 10em;
  .item {
    width: 5em;
    height: 5em;
    background-color: red;
  }
  .yellow {
    width: 5em;
    height: 5em;
    background-color: yellow;
    grid-area: b; //区域
  }
}