Grid 布局基礎(chǔ)知識（1028）

網(wǎng)格布局是一個基于二維網(wǎng)格布局的系統(tǒng)，以下是關(guān)于網(wǎng)格布局我個人的理解

grid 布局的基本術(shù)語解釋:

網(wǎng)格容器

• 類似于 flex 布局里的容器，位置處于最外層，里面包含子項目。容器有容器的屬性，項目有項目的屬性。將盒子轉(zhuǎn)為網(wǎng)格容器只需要設(shè)置如下屬性：

display: grid;

網(wǎng)格項目

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

• 容器 container 處于外層，內(nèi)層 item 屬于網(wǎng)格項目

網(wǎng)格單元

• 網(wǎng)格單元包括單元格和網(wǎng)格區(qū)域

網(wǎng)格區(qū)域

<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;
  }
}

• 我們可以通過項目屬性指定區(qū)域，達(dá)到如下效果

.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; //改變位置
  }
}

網(wǎng)格軌道

• 網(wǎng)格中的每一行叫行軌道，列叫列軌道

軌道間隙

我們通過容器屬性 gap 指定行間隙 和 列間隙，效果如下

gap: 0.5em 1em;

實例演示今晚學(xué)到的全部 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;
  // 顯示網(wǎng)格單元
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(3, 10em);
  grid-template-areas: "a a a" "b b b" "c c c"; //網(wǎng)格區(qū)域
  place-content: center;
  gap: 0.5em 1em;
  // 隱式網(wǎng)格單元
  grid-auto-flow: row; //默認(rèn)排列方式左右 設(shè)置隱士單元高度
  grid-auto-rows: 10em;
  .item {
    width: 5em;
    height: 5em;
    background-color: red;
  }
  .yellow {
    width: 5em;
    height: 5em;
    background-color: yellow;
    grid-area: b; //區(qū)域
  }
}

批改老師：天蓬老師

批改狀態(tài)：不合格

老師批語：想一下什么原因?