CSS筆記- grid

J
J

目錄

設定更直覺一點，作為響應式也很方便

設置方式

//HTML
<div class="grid-container">

<div class="grid-items">1</div>
<div class="grid-items">2</div>
<div class="grid-items">3</div>
<div class="grid-items">4</div>
<div class="grid-items">5</div>
<div class="grid-items">6</div>
<div class="grid-items">7</div>
<div class="grid-items">8</div>
</div>

setting by width&height


依據給定的邊線決定grid如何排列

columns & rows

  • grid-template-columns:欄寬，並決定grid排列方式
  • grid-template-rows:列高
  • grid-auto-rows:給予未指定列的高度

grid-gap


間隔寬度設置

  • grid-gap:統一寬度
  • grid-columns-gap:個別設置
  • grid-row-gap:個別設置

ex: 8個div給3個值

.grid-container{
display:grid;
grid-template-columns: 200px 200px 200px;
}

| 1 | 2 | 3 | 
| 4 | 5 | 6 |
| 7 | 8 |

6個div給兩個值

.grid-container{
display:grid;
grid-template-columns: 200px 200px;
}

| 1 | 2 | 
| 3 | 4 |
| 5 | 6 | 


缺點：大小固定，無法依照頁面大小彈性排列


fr unit

  • fraction unit以比例為單位計算
.grid-container{
display:grid;
grid-template-columns:1fr 1fr 1fr
/* 每個單位佔的比例都是1,合計為3*/
}

| 1 | 2 | 3 | 
| 4 | 5 | 6 |
| 7 | 8 |

.grid-container{
display:grid;
grid-template-columns:2fr 1fr 1fr
/* 第一欄佔2個單位，其他佔的比例都是1單位,合計為4*/
}


| 1   | 2 | 3 | 
| 4   | 5 | 6 |
| 7   | 8 |

也可以混用，例如

.grid-container{
display:grid;
grid-template-columns: 2fr 1fr 300px
/* 第一欄佔2個單位，第二欄佔1單位，最後一欄固定300px*/
}



repeat notation


當欄位很多或是單位一樣時候可以使用，可以一次給定多個單位，會依序排列

.grid-container{
display:grid;
grid-template-columns: repeat(3 , 1fr)
/*重複3次,每個為1fr*/
}


| 1 | 2 | 3 | 
| 4 | 5 | 6 |
| 7 | 8 |

.grid-container{
display:grid;
grid-template-columns: 100px repeat(2 , 1fr 2fr)
/*混用的方式*/
}


| 1   | 2 | 3   | 4 | 5   |
| 6   | 7 | 8   |  
上面的寬度依序為：
100px 1fr 2fr 1fr 2fr


minmax設置

設定最大與最小值，讓欄位更有彈性

語法：minmax(unit, unit)//可為auto

.grid-container{
display:grid;
grid-template-columns: 2fr 1fr minmax(100px,300px)
/*第三欄最小為100px,最大為300px*/
}


同樣可設置在row


auto-placement and order


用於改變元素排列順序，類似flex-row/flex-column

.grid-container{
display:grid;
grid-auto-flow: column;
}


| 1 | 4 | 7 | 
| 2 | 5 | 8 |
| 3 | 6 |

order:當沒有給定的時候會排在最前面，並且依順序排列，在子元素進行設置
例如：

.grid-container{
display:grid;
grid-auto-flow: column;
}

.grid-container div:nth-child(2){
order:1;
}


| 1 | 5 | 8 | 
| 3 | 6 | 2 |
| 4 | 7 |

其他沒有指定order，所以會照預設順序排列

.grid-container{
display:grid;
grid-auto-flow: column;
}

.grid-container div{
order:2
}
.grid-container div:nth-child(2){
order:1;
}


| 2 | 4 | 7 | 
| 1 | 5 | 8 |
| 3 | 6 |

都有指派的情況下就會照order順序排列



auto-fill, auto-fit


auto-fill:盡可能填滿整個畫面

.grid-container{
display:grid;
repeat(autofill, minmax(150px ,1fr));
/*當寬度變大時會彈性調整欄數，每欄寬度一樣，但都不會小於150px*/
}

auto-fill與auto-fit差別：
當畫面變大的時候，使用auto-fill可能會產生空白
auto-fit則會自動調整寬度使得grid填滿整個畫面


設置div位置的方式


Line-based Positioning

  • 定義好grid的大小以後，使用border(line)的位置來決定div位置
    由左到右開始數，-1表示最右邊
  • 當空間不夠的時候會自動跳到下一列
  • 可以縮寫為grid-column: 1/ -1 (start/end)
  • 可以只設置start
  • 可以使用span 2代替end，例如2 / 4 可以寫成 2 / span 2
  • grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
.grid-container{
display:grid;
grid-template-columns: repeat(4, 1fr)

}

.grid-container div:nth-child(1){
grid-column-start:1;
grid-column-end:-1
}


第一欄會佔滿左邊第一條到最後一條的空間
也就是整列

|1         |
|2|3|4|5|



Named Lines

.grid-container{
display:grid;
grid-template-columns: 2fr [content-start] 4fr [content-end]
/*4fr為指定content的位置與寬度*/
}

.grid-container div:nth-child(1){
grid-column: content-start;
}

其他未指定的則會依序排列


auto-placement, packing modes


在指定特定寬度/高度下，可能會有一些留白的部分
例如

 

.grid-container div:nth-child(1){
grid-column-end: span 2
}
.grid-container div:nth-child(3){
grid-row-end: span 2
}



這時候在父容器下設定 grid-auto-flow: dense

.grid-container{
display:grid;
grid-template-columns: repeat(3, 2fr)
grid-auto-flow: dense;

}

就會讓底下元素自動緊密排列填滿空隙，可以用在照片等等大小不一的狀況下



Align, Justifying items


類似block的排列方式,在grid套用的話就會依據個別元素定義的區域內做改變，大小為grid定義的大小

  • justify-items:start/center/end/stretch(defult)
  • align-items/start/centet/end/stretch(default)

    也可以套用單一元素
    justify-self/aling-self

Align, Justifying content

  • grid內的元素大小沒有填滿grid的狀態下（通常是給定px)
  • grid套用的話會是所有元素一起移動，而不是在給定的範圍內變動
  • 使用space-between, space-around會顯示比給定的數值(px)還要大的情況
  •  

grid template areas

 

  • 直接使用區域命名佈局
.grid-container{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"main main"
". ft"
/*.表示留白*/
}

main {
grid-area: main;
}

footer {
grid-area: ft;
}

|main       |
     |footer|


magic lines, magic areas

  1. .grid-container{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"main main"
". ft"
/*.表示留白*/
}

main {
grid-area: main;
}

footer {
grid-area: ft;
}
.div{
grid-row: main-start / ft-end
/*.main的起始row與ft終止row*/
}
      • 區域命名佈局下使用其他欄位為參考起始/終
  2. .grid-container{
display:grid;
grid-template-columns: 2fr [content-start] 4fr [content-end];
}

.div{
grid-area: content
}
    • 欄線命名下直接使用content

    nested grids(巢狀)

  1. .grid-container{
display:grid;
grid-template-columns: 2fr [content-start] 4fr [content-end];
}

.div{
display: subgrid
/*跟從外層排列*/
display: content
/*會與上一層元素的排列方式一樣，且外層消失不見（類似把自己往上提升一層級）
*/
}


  2. stacking & z-index


  3. 當元素重疊的時候可以用z-index決定順序
  4. 如果單指定col或row位置的情況下，元素會自動換列挪出空間來，只有指定area或是同時指定col與row(把元素位置絕對定位)，才會有重疊的情況發生

  5. 絕對定位

  6. 例如left/right，與grid排列方向無關，只看物理上的位置


    Feature Queries and Grid


  7. 依據瀏覽器支援與否顯示
    例如 在class='display-message'內呈現瀏覽器不支援grid

    ＠supports(display:grid) {
.display-message {
display: none
}
}


    content sizing keywords

套用在外層grid上，會依照內容長度決定寬度:最小單元/最大單元（可能會over-flow)/依給定長度伸展但不會超過括號內長度

  1. width: min-content/max-content/fit-content(param)


    reference:
    https://www.moonlearning.io/blog/css-grid

    http://gridbyexample.com/examples/

    https://cssgridgarden.com/

Comments

Authors

Tags