標籤彙整: css

在CSS GRID Layout實現colspan, rowspan

善用 display: grid 來處理排版真的非常方便,不但可以簡化html巢狀結構,在處理RWD的時候,也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。

說到 colspan 的話,上述提到的 grid-template-areas 也可以輕鬆達到這個需求,例如以下範例:

<style>
  .grid {
    display: grid;
    grid-template-areas: "col-1 col-2 col-3 col-4" "col-5 col-5 col-5 col-4";
  }

  .col-1 {
    grid-area: col-1;
  }
  .col-2 {
    grid-area: col-2;
  }
  .col-3 {
    grid-area: col-3;
  }
  .col-4 {
    grid-area: col-4;
  }
  .col-5 {
    grid-area: col-5;
  }
</style>

<div class="grid">
  <div class="col-1">1</div>
  <div class="col-2">2</div>
  <div class="col-3">3</div>
  <div class="col-4">4</div>
  <div class="col-5">5</div>
</div>

可以得到以下結果:

但這個作法只限於在父層,並且內部的數量是固定的。也就是說如果今天是一個無法預估數量的列表型態,就無法用這個做法。

假設現在有一個商品列表,排列為左右兩欄的方式向下排,商品數量不固定,並且在中間需要插入一則廣告,廣告寬度為左右兩欄的寬度,那該怎麼辦呢?

我們可以在子層,也就是設為 grid 的內層,使用 grid-column 這個 property,例如以下範例:

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ad {
    grid-column: 1 / span 2;
  }
</style>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="ad">ad</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

可以得到以下結果:

所以我們只要將廣告安排在奇數欄,就可以順利呈現。若廣告不慎安插在複數欄時,也會直接在下一列呈現,不會破壞 grid 欄數設定,相當方便。

grid-column 是 grid-column-start 跟 grid-column-end 前後值以斜線分隔的簡寫方式,所以也可以寫成:

.ad {
  grid-column-start: 1;
  grid-column-end: span 2;
}

span 代表的是從start的欄位開始,要合併到的欄位的末端,所以end也可以寫成 3,變成 grid-column: 1 / 3,會得到一樣的結果。

關於CSS權重的筆記

關於權重的計算,在W3C的網頁上的介紹是:

A selector’s specificity is calculated as follows

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

翻譯一下

  • ID selector的數量為a
  • class, attr, 偽類別為b
  • tag跟偽元素為c
  • 星號直接無視

範例

*               /* a=0 b=0 c=0 -> specificity = 0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-1 */
UL LI           /* a=0 b=0 c=2 -> specificity = 0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity = 0-1-3 */
LI.red.level    /* a=0 b=2 c=1 -> specificity = 0-2-1 */
#x34y           /* a=1 b=0 c=0 -> specificity = 1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 1-0-1 */

計算結果的比較方式

從a比較到c,且abc各自獨立,無法進位。inline style 跟 !important 則不在計算範圍中。

inline style 跟 !important 的權重

inline style 的權重大於所有樣式表內容。!important 則是在權重計算時給予最優先權,權重越大的 !important 也會覆寫權重小的 !important。也因此,在inline style中加上 !important,也會覆寫在樣式表中加的 !important,例如:

css

.class1 {
  color: #f00 !important;
}

html

<div class="class1" style="color: #0f0 !important>
  我會是綠色
</div>