レスポンシブ対応等幅リストCSS

column.css

@charset "utf-8";

/***********************************************************
  レスポンシブ対応リストタグ等幅カラムスタイルシート
  記述順：
  スマートフォン
  ↓
  タブレット@media screen and (min-width: 641px)
  ↓
  PC@media screen and (min-width: 981px)

  使用方法：
  リストタグのulへ該当するクラス名を記述すれば等幅カラム割が適用される。
  例 <ul class="column2-3-4"> と書けば  スマホ→二列／タブレット→3列／PC→4列となる。

  なお、ulは幅100％指定されているため、
  全体の幅を固定するには、divなどで親要素を作りサイズを指定する。
  li要素に余白を付ける場合は別途padding指定。
  marginを付けたい場合はwidthの修正（margin分を差引く）が必要。
*******************************************************/


/*リセット*/
.column1-2-3, .column2-3-4, .column3-4-5, .column2-2-2,
.column3-3-3, .column4-4-4, .column5-5-5, .column6-6-6,
.column7-7-7, .column8-8-8 {
  display: inline-block;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}


/*li要素 縦の余白*/
.column1-2-3 li, .column2-3-4 li, .column3-4-5 li,
.column2-2-2 li, .column3-3-3 li, .column4-4-4 li,
.column5-5-5 li, .column6-6-6 li, .column7-7-7 li,
.column8-8-8 li {
  float: left;
  margin-bottom: 5px;
  box-sizing: border-box;
}


/* 1カラム */
.column1-1-1 li, .column1-2-3 li {
  width: 100%;
}

/* 2カラム */
.column2-2-2 li, .column2-3-4 li {
  /*calc未対応Browser用*/
  width: 50%;
  /*Modern Browser用*/
  width: calc(100% / 2);
}

/* 3カラム */
.column3-3-3 li, .column3-4-5 li {
  width: 33.33333%;
  width: calc(100% / 3);
}

/* 4カラム */
.column4-4-4 li {
  width: 25%;
  width: calc(100% / 3);
}

/* 5カラム */
.column5-5-5 li {
  width: 20%;
  width: calc(100% / 5);
}

/* 6カラム */
.column6-6-6 li {
  width: 16.666666%;
  width: calc(100% / 6);
}

/* 7カラム */
.column7-7-7 li {
  width: 14.2857142857%;
  width: calc(100% / 7);
}

/* 8カラム */
.column8-8-8 li {
  width: 12.5%;
  width: calc(100% / 8);
}



/*タブレット用
*******************************/
@media screen and (min-width: 641px) {
  .column1-2-3 li {
    width: 50%;
    width: calc(100% / 2);
  }
  .column2-3-4 li {
    width: 33.33333%;
    width: calc(100% / 3);
  }
  .column3-4-5 li {
    width: 25%;
    width: calc(100% / 3);
  }
}



/*PC用
*******************************/
@media screen and (min-width: 981px) {
  .column1-2-3 li {
    width: 33.33333%;
    width: calc(100% / 3);
  }
  .column2-3-4 li {
    width: 25%;
    width: calc(100% / 4);
  }
  .column3-4-5 li {
    width: 20%;
    width: calc(100% / 5);
  }
}