5.3-grid-items.md

7.3 Grid Items

grid-column

• 數值指的是 Grid Column Line 的意思。
• span 2：指的是擴展兩個欄的意思。

/* 寫法一 */
grid-column: 1 / 3;
grid-column: -4 / -2; /* 反過來數 */

/* 寫法二 */
grid-column-start: 1;
grid-column-end: 3;

/* 寫法三 */
grid-column: 1 / span 2;


/* 寫法四：使用 line 的命名 */
/*
使用 Grid Line 的名稱，假設在 Grid Container 有設定：
grid-template-columns: [a] auto [b] auto [c] auto [d];
*/
grid-column: a / c;

例：

{% embed url="https://codepen.io/carlos411/pen/eYdMEwm" %}

grid-row

• 數值指的是 Grid Row Line 的意思。
• span 2：指的是擴展兩個欄的意思。

/* 寫法一 */
grid-row: 1 / 4;
grid-row: -4 / -1; /* 反過來數 */

/* 寫法二 */
grid-row-start: 1;
grid-row-end: 4;

/* 寫法三 */
grid-row: 1 / span 3;

/* 寫法四：使用 line 的命名 */
/*
使用 Grid Line 的名稱，假設在 Grid Container 有設定：
grid-template-rows: [a] auto [b] auto [c] auto [d];
*/
grid-row: a / d;

例：

{% embed url="https://codepen.io/carlos411/pen/poELWzM" %}

grid-area

原來九個欄位如下：

將 4 的那個欄位，擴展到 4、5、7、8，變成如下：

/* 寫法一 */
grid-row-start: 2;
grid-column-start: 1;
  
grid-row-end: 4;
grid-column-end: 3;

/* 寫法二 */
grid-area: 2 / 1 / 4 / 3;

/* 寫法三 */
grid-area: 2 / 1 / span 2 / span  2;

例 1：使用 Grid Line 來設定範圍：

{% embed url="https://codepen.io/carlos411/pen/JjRLroE" %}

例 2：使用 grid-area 來將欄位指定位置(例：將 1 和 9 對調)：

{% embed url="https://codepen.io/carlos411/pen/OJRvxbr" %}

例 3： grid-area 也可以用來設定這個 Item 的名稱，然後就可以在 Grid Container 中使用 grid-template-areas 中直接指定名稱。

div.item{
  grid-area: header;
}

{% hint style="info" %} 範例請參考 grid-template-areas 屬性。 {% endhint %}

排列相關

justify-self

請參考 justify-items。

align-self

請參考 align-items。

place-self

請參考 place-items。

是 justify-self 和 align-self 的簡寫形式，格式如下：

place-self: <align-self> <justify-self>;