亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

作業(yè)內(nèi)容：實例演示隱式網(wǎng)格, 對齊方式與行列間隙的設(shè)置方式與使用場景、前提

隱式網(wǎng)格

html

    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
      <div class="item other">item10</div>
      <div class="item other">item11</div>
    </div>

css

      .container {
        width: 400px;
        display: grid;
        /* 顯式網(wǎng)格 */
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 50px);
        /* 1. 排列規(guī)則 */
        grid-auto-flow: row;
        /* 2. 隱式網(wǎng)格 */
        /* 多余的項目,出現(xiàn)在隱式網(wǎng)格中(自動生成) */
        grid-auto-rows: 50px;
      }

效果

前提：項目比網(wǎng)格指定的要多。
使用場景：想要增加要展示的數(shù)據(jù)時。比如，以前的涉及是顯示9張圖片，而現(xiàn)在想要展示11張圖片，可以使用隱式網(wǎng)格，不用修改原有的html。

對齊方式

htm

    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
    </div>

css
1.項目在”容器”中的對齊
place-content

      /* 創(chuàng)建容器的剩余空間 */
      .container {
        /* 當(dāng)前 300 * 300  */
        width: 450px;
        height: 450px;
        border: 1px solid #000;
        background-color: lightcyan;
        place-content: center;
      }

效果

2.項目在”單元格”中的對齊
place-items

      .container {
        /* 當(dāng)前 300 * 300  */
        width: 450px;
        height: 450px;
        border: 1px solid #000;
        background-color: lightcyan;
        place-content: center;
        /*項目在"單元格"中的對齊 */
        place-items: center;
      }

效果

3.設(shè)置某個項目在單元格對齊方式
place-self

      .container .item:nth-child(5) {
        background-color: yellow;
        place-self: end;
      }

效果

前提: 必須存在”剩余空間”

使用場景：圖片、網(wǎng)站某一欄目等的排列和布局

行列間隙

html

    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
    </div>

css

      .container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        /* 行列間隙 gap  */
        /* gap: 垂直方向 水平方向  */
        gap: 10px;
      }
      .container > .item {
        background-color: wheat;
      }

效果

使用場景：統(tǒng)一調(diào)整項目之間的邊距的時候

批改老師：PHPz

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

老師批語：效果完整，沒什么問題繼續(xù)加油