grid 佈局實現複雜的頁面結構

grid[1] 佈局通常在C端佈局用得比較多,非常強大,特別是在響應式佈局上也有很大作用,過去我們使用彈性盒子佈局,flex佈局,通常我們在不改變結構的情況下可以使用grid佈局來更靈活的拓展我們的佈局

正文開始...

grid

當我們對一個父級元素使用grid時,此時子級元素會發生什麼

 <div>

    <div>

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

</div>

對應的css

 * {

    padding: 0;

    margin: 0;

  }

  .app {

      background: beige;

  }

  .box-1 {

      display: grid;

  }

  .box-1 .item {

      width: 80px;

      height: 80px;

  }

  .box-1 .item:nth-of-type(2n) {

      background-color: green;

  }

  .box-1 .item:nth-of-type(2n+1) {

      background-color: pink;

  }

此時子元素將默認單行排列

默認情況下,當父元素設置grid, 默認grid-template-columns: 1fr,grid-template-rows:1fr

網格佈局主要由columsrows來定義列與行

 <div>

    <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>
.app {

            background: beige;

        }

.box-1 {

    display: grid;

    grid-template-columns: 33.3% 33.3% 33.3%;

    grid-template-rows: 200px 200px 200px;
}

.box .item:nth-of-type(2n) {

    background-color: green;

}

.box .item:nth-of-type(2n+1) {

    background-color: pink;

}

寬度自適應,每個高度爲固定200px的九宮格

我們從以上發現,我們的結構只有父子結構,第二行也是自動換行從第 4 個元素開始。

也就是grid-template-columns確定了 3 列,並且寬度是整個屏幕的33.3%, 而高度爲固定高度200px有且僅有 3 行

當我們把grid-template-columns: 1fr 1fr 1fr時,此時與之效果是一樣,有且僅僅只有三列

看到1fr是不是很陌生,這是網格的軌道單位, 這是一個很靈活的單位

grid-template-columns

在以上九宮格例子中,我們使用grid-template-columns控制了網格列數,通過這個屬性,我們可以不用單獨對子元素進行控制

 .box-1 {

      display: grid;

      grid-template-columns: 200px 100px 1fr;

      grid-template-rows: 200px 200px 200px;

  }

  .box .item:nth-of-type(2n) {

      background-color: green;

  }

  .box .item:nth-of-type(2n+1) {

      background-color: pink;

  }

在父元素上,我們可以在grid-template-columns中設置子元素columns的寬度,grid-template-columns: x y z ...x,y,z 既可以是百分比,也可以是固定像素

grid-template-rows

在以上例子中我們用這個屬性控制了子元素的高度,當我們 UI 設計的一個模塊是 4 行時,我們就可以對應設置grid-template-rows: x y z p這個屬性控制了網格中的行

grid-columns-grap

控制列之間的間距

.app {

  background: beige;

}

.box-1 {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 200px 200px 200px;

  grid-column-gap: 10px; /* 列之間10個像素*/

}

.box .item:nth-of-type(2n) {

    background-color: green;

}

.box .item:nth-of-type(2n+1) {

    background-color: pink;

}

grid-rows-grap

控制行之間的間距

.box-1 {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 200px 200px 200px;

    grid-row-gap: 10px; /* 行之間的間距 */

}

我們實現上下左右間距相等的間距

.app {

  background: red;

}

.box-1 {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 200px 200px 200px;

  grid-column-gap: 10px;

  grid-row-gap: 10px;

  padding: 10px;

}

我們給父元素添加padding: 10px;, 然後分別設置grid-column-gap: 10px;,grid-row-gap:10就可以實現間距相等了

我們可以用column-gaprow-gap來替代grid-column-gapgrid-row-gap

repeat 複製

在以上我們使用grid-template-columns:1fr 1fr 1fr來控制,我們也可以利用 repeat 來簡寫

.box-1 {

  display: grid;

  / * grid-template-columns:1fr 1fr 1fr */

  grid-template-columns: repeat(3,1fr);

  /*

    grid-template-rows: 200px 200px 200px

  */

  grid-template-rows: repeat(3, 200px);

  grid-column-gap: 10px;

  grid-row-gap: 10px;

  padding: 10px;

}

grid-column-start 與 grid-column-end

控制列的跨度

.box .item:nth-of-type(1) {

    grid-column-start: 1;

    grid-column-end: 4;

}

我們對第一個 items 使用grid-column-start:1,grid-column-end:4

grid-row-start 與 grid-row-end

控制行的跨度

  .box .item:nth-of-type(1) {

      grid-row-start: 3;

      grid-row-end: 3;

      grid-column-start: 1;

      grid-column-end: 3;

  }

grid-column 與 grid-row

在之前我們有用過grid-column-startgrid-column-end來控制列的跨度

我們可以通過grid-column:1/3來簡grid-column-start:1;grid-column-end:3

.box-1 {

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 20px;

  position: relative;

}

.box .item:nth-of-type(1) {

    grid-column: 1/3;

}

我們通過grid-row:1/3來簡寫grid-row-start:1;grid-row-end:3

.box .item:nth-of-type(1) {

    grid-column: 1/3;

    grid-row: 1/3;

}

minmax(200px, 1fr)

最小寬度 200,最大自適應

.box-1 {

        display: grid;

        /* grid-template-columns: 1fr 1fr 1fr; */

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        grid-column-gap: 10px;

        grid-row-gap: 10px;

        padding: 10px;

    }

gap 的簡寫

gap:10px 20px代表row-gap:10pxcolumn-gap:20px

 .box-1 {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    /* grid-column-gap: 10px;

    grid-row-gap: 10px; */

    /* column-gap: 10px;

    row-gap: 10px; */

    gap:10px 20px;

 }

grid-area

這是一個基於grid-row-startgrid-column-startgrid-row-endgrid-row-end的簡寫

.box .item:nth-of-type(2) {

  grid-area: 1 / 2 / 2 / 2;

}
 <div>

   <header>header</header>

   <aside>slide</aside>

   <main>main</main>

   <footer>footer</footer>

</div>

對應的 css 如下

* {

  padding: 0;

  margin: 0;

}

.app {

    background: red;

    display: grid;

    grid-template-columns: 200px 1fr;

    grid-template-rows: 30px calc(100vh - 90px) 60px;

}

header {

    grid-column: 1 / 3;

    background-color: blue;

}

aside {

    grid-column: 1 / 2;

    background-color: pink;

}

main {

    grid-column: 2 / 3;

    background-color: yellow;

}

footer {

    grid-column: 1 / 3;

    background-color: palegreen;

}

我們在父元素上設置了grid-template-columns: 200px 1fr, 這個使得網格的第一列是固定200px, 第二列是1fr

我們使用grid-template-rows: 30px calc(100vh - 90px) 60px;設置了row,那麼第一行就是 30px,第二行就是calc(100vh -90px),第三行就是60px

我們在header上用grid-column: 1/3設置了跨列顯示,在aside上設置了grid-column: 1/2, 在main上設置了grid-column: 2/3;footer設置了grid-column:1/3最後我們看下效果

grid-area

命名網格區域名稱

  * {

    padding: 0;

    margin: 0;

  }

.app {

  background: red;

  display: grid;

  grid-template-columns: 200px 1fr;

  grid-auto-rows: minmax(100px, auto);

  grid-template-areas:

  "hd hd hd"

  "sd main main"

  "ft ft ft";

}

header {

  grid-area: hd;

  background-color: blue;

}

aside {

  grid-area: sd;

  background-color: pink;

}

main {

  grid-area: main;

  background-color: yellow;

}

footer {

  grid-area: ft;

  background-color: palegreen;

}

總結

參考資料

[1]grid: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

[2]code example:_ https://github.com/maicFir/lessonNote/tree/master/html/09-grid 佈局_

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/g2itgo2j4ZaVMrhGIdUhNQ