/*
  檔案功能：_grid.css
  被引用目的：格線與欄位系統，用來安排作品集、文章列表或多欄版面。
  編寫安排：以模組化方式集中管理相關 class，讓 style.css 可以用 @import 組合多個小檔案，避免所有樣式混在單一大檔中。
  與 HTML 的關係：HTML 先使用語意清楚的 class 名稱，本檔再針對這些 class 定義可重複使用的視覺規則。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.show-col {
  /* 設定元素高度。 */
  height: 30px;
  /* 設定背景，可包含顏色、圖片或漸層。 */
  background: #ffbfa3;
    /*區隔上下距離，方便觀察*/
  /* 設定下方外距。 */
  margin-bottom: 5px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.row:after {
  /* 設定 CSS 屬性 content，用來微調版面或視覺表現。 */
  content: "";
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;
  /* 清除浮動效果，避免後續區塊被浮動元素影響。 */
  clear: both;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
[class*="col-"] {
  /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
  float: left;
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 0 15px;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.row {
  /* 設定元素外距，控制元素與元素之間的距離。 */
  margin: 0 -15px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-1 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 8.333333%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-2 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 16.666667%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-3 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 25%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-4 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 33.333333%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-5 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 41.666667%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-6 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 50%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-7 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 58.333333%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-8 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 66.666667%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-9 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 75%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-10 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 83.333333%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-11 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 91.666667%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.col-xs-12 {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;}

/*sm*/
/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 544px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-1 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 8.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-2 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 16.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-3 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 25%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-4 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 33.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-5 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 41.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-6 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 50%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-7 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 58.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-8 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 66.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-9 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 75%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-10 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 83.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-11 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 91.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-sm-12 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}

/*md*/
/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 768px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-1 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 8.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-2 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 16.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-3 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 25%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-4 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 33.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-5 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 41.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-6 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 50%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-7 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 58.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-8 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 66.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-9 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 75%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-10 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 83.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-11 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 91.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-md-12 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}

/*lg*/
/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-1 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 8.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-2 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 16.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-3 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 25%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-4 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 33.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-5 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 41.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-6 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 50%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-7 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 58.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-8 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 66.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-9 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 75%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-10 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 83.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-11 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 91.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-lg-12 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}

/*xl*/
/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 1200px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-1 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 8.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-2 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 16.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-3 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 25%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-4 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 33.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-5 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 41.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-6 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 50%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-7 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 58.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-8 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 66.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-9 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 75%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-10 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 83.333333%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-11 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 91.666667%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .col-xl-12 {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}
