CSS - 初步了解 CSS Gird - (固定版面配置)

發表於 | 分類於

CSS Gird 介紹

CSS Grid 擁有非常靈活自由的排版方式，和 flex 的一維不一樣 CSS Grid 屬於二維網格系統，擁有欄與列的格局，就像表格一樣，所以說當我們設定好父層的 container 後，底下的元素就能隨意我們擺放。

若還是不太懂，可以參考 Bootstrap 的 row, col ，其概念都是類似的，但 Bootstrap 的是相對百分比定位，而 CSS Gird 則可以自行定義要的寬高

如何使用

一個 Grid 有兩個部分：框架( Grid Container )與元件( Grid Items )。

1
2
3
4
5
<div class="container">
  <div class="itemA">AA</div>
  <div class="itemB">BB</div>
  <div class="itemC">CC</div>
</div>

display

首先我們要弄成框架的元素定義成 Grid

1
2
3
.container{
  display:grid | inline-grid; /* 與 flex 一樣，改成 grid */
}
  • 可選擇區塊 gird 或者 行內區塊 gird

設定欄列 grid-template-columns , grid-template-rows

接著進行頁面切版佈局，使用 column 和 row 定義格線，內容再依隔線作安排

grid-template-columns 屬於欄(從左到右，橫的)，而 grid-template-rows 屬於列(從上到下，直的)

1
2
3
4
5
.container{
  display: grid | inline-grid; /* 與 flex 一樣，改成 grid */
  grid-template-columns: 100px 40% auto 200px;
  grid-template-rows: 100px 150px 3fr 2fr;
}
  • track-size – 可以是網格中可用空間的長度，px 、百分比或分數（使用 fr 單位）
  • line-name – 選擇的任意名稱

fr 的意思是分數，能夠將可用的剩餘空間做比例分割，假如使用成 50px 1fr 3fr 1fr ，意思就是扣掉 50px 後佔此容器寬度的 1/5, 3/5, 1/5

設定區域名稱

之後在子層元素設定 grid-area: 自訂區域名稱

1
2
3
4
5
6
7
8
9
.itemA{
  grid-area: AA;
}
.itemB{
  grid-area: BB;
}
.itemC{
  grid-area:CC;
}

設定完成後，我們就可以在框架(父元素)增加 grid-template-areas 定義子元素的位置

1
2
3
4
5
6
7
8
9
10
.container{
  display: grid; /* 與 flex 一樣，改成 grid */
  grid-template-columns: 100px 40% auto 200px;
  grid-template-rows: 100px 150px 3fr 2fr;
  grid-template-areas:
  "AA AA BB BB"
  "AA AA BB BB"
  "AA AA BB BB"
  "CC CC CC CC";
}

這樣就基本完成空間的配置

留白

如果在配置的有個空間留白，只要在 grid-template-areas 要留白的地方改成 “.“，就能達到效果了

1
2
3
4
5
6
7
.container{
  grid-template-areas:
  "AA AA BB BB"
  "AA AA BB BB"
  " .  . BB BB"
  "CC CC CC CC";
}

grid-gap

若想要每個空間都有些間距，可以使用 grid-gap

1
2
3
4
5
/* 欄列間距10px */
grid-gap:10px;

/* 列與列之間10px 欄與欄之間15px */
grid-gap:10px 15px /*  <grid-row-gap> <grid-column-gap>; */

注意:如果使用 grid-gap ，如果配置的寬高都是固定高度的話，會凸出去，所以建議其中一個改成 auto ，才不會有溢出的狀況
另外，grid-gap 已重命名為 gap 囉！所以建議使用 gap 的方式

最後成果範例:

注意事項

  • 不能交錯排，例如:

    1
    2
    3
    4
    5
    6
    7
    .container{
        grid-template-areas:
        "AA AA BB AA"
        "CC CC BB BB"
        "BB CC BB CC"
        "CC CC CC CC";
      }

  • 如果使用 grid-template-areas 方式配置空間，請保持區塊樣子(不能有凸凹)，例如:

    1
    2
    3
    4
    5
    6
    7
    .container{
        grid-template-areas:
        "AA AA BB BB"
        "CC CC CC BB"
        "CC CC BB BB"
        "CC CC CC CC";
      }

結論

對於 grid 真的是相見恨晚，而且了解之後也沒想像得難，上面說的都只是固定版面而已，還有好多還沒玩到呢，若是已經等不及知道還有什麼好玩的，可以到參考文獻看看哦~

最後整理上面所學到的屬性:
grid-template-columns：網格區塊欄
grid-template-rows：網格區塊列
grid-template-areas：定義空間的位置
grid-area: 自訂區域名稱
gap: 間距

參考文獻

CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
CSS Grid 屬性介紹
A Complete Guide to Grid