0%

CSS Grid Intro

Posted on

CSS grid system part I

Intro 整體介紹

使用 CSS 內建的 grid，需要有父子結構，也就是外層須由一層 container (容器) 包住要排版的子元素

  • 首先，容器的 display 屬性必須設置為 grid 或 inline-grid
1
2
3
4
5
6
7
8
  .grid-container {
      display: grid;
  }
/* 或 */

  .grid-container {
      display: inline-grid;
  }
  • 第一層的子元素會直接成為 grid items (網格排版元素)
  • 垂直方向的排版稱為 grid columns (網格列)
  • 水平方向的排版稱為 grid rows (網格行)
  • 在排版元素間的空格稱為 grid gaps (網格間隔)
    • 有 column gaps (列的間隔)，也有 row gaps (行的間隔)
    • 可以使用的屬性有：grid-column-gap, grid-row-gap, grid-gap
1
2
3
4
5
  .grid-container {
      display: grid;
      grid-gap: .5rem 1.5rem;
  }
/* 先設定上下間隔，再設定左右間隔 */
  • 網格線 (grid lines)，垂直的是 column lines (順序由左到右)，水平的是 row lines (順序由上到下)
    • 對 3 X 3 的網格來說
      • 左邊界是列的 line1，右邊界是列的 line4
      • 上邊界是行的 line1，下邊界是行的 line4
1
2
3
4
5
6
7
8
9
10
11
  .item1{
      grid-column-start: 1;
      grid-column-end: 3;
  }
/* 從垂直線1開始到線3結束的 item1 */
  
  .item2{
      grid-row-start: 1;
      grid-row-end: 3;
  }
/* 從水平線1開始到線3結束的 item2 */