Columns (カラム)

使い方

  1. _col*で2〜4の間でカラム数を決めてください。（1カラムの場合はこのクラスは不要）
  2. 子要素のクラスにはb-cardを指定してください。
  3. カラム間のスペースなどは各ページのクラスにて上書きして調整してください。

画面表示

1列目
2列目
3列目

HTML/CSS（Sass）

<div class="b-columns b-columns_col3">
 <!-- ボックス内デザイン -->
 <div class="b-card">
  1列目
 </div>
 <div class="b-card">
  2列目
 </div>
 <div class="b-card">
  3列目
 </div>
</div>
.b-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.b-columns_col3::after {
  content: "";
  display: block;
  width: calc((100% - 4rem) / 3);
}

.b-columns_col4::before {
  content: "";
  display: block;
  width: calc((100% - 6rem) / 4);
  order: 1;
}

.b-columns_col4::after {
  content: "";
  display: block;
  width: calc((100% - 6rem) / 4);
}

@media screen and (min-width: 768px) {
  .b-columns {
    flex-direction: row;
  }
  .b-columns_col2 > .b-card {
    width: calc((100% - 2rem) / 2);
  }
  .b-columns_col3 > .b-card {
    width: calc((100% - 4rem) / 3);
  }
  .b-columns_col4 > .b-card {
    width: calc((100% - 6rem) / 4);
  }
}
@media screen and (max-width: 767px) {
  .b-columns {
    flex-direction: column;
  }
  .b-columns_col2 > .b-card {
    width: 100%;
  }
  .b-columns_col3 > .b-card {
    width: 100%;
  }
  .b-columns_col4 > .b-card {
    width: 100%;
  }
}


.b-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @include mq(pc) {
      flex-direction: row;
    }
    @include mq(sp) {
      flex-direction: column;
    }  

    //2カラム
    &_col2 {
      & > .b-card {    
        @include mq(pc) {
          width: calc((100% - 2rem) / 2);
        }
        @include mq(sp) {
          width: 100%;
        }    
      }
    }

    //3カラム
    &_col3 {
      & > .b-card {
        @include mq(pc) {
          width: calc((100% - 4rem) / 3);
        }
        @include mq(sp) {
          width: 100%;
        }
      }
      //レイアウト崩れの対応
      &::after{
        content:"";
        display: block;
        width: calc((100% - 4rem) / 3);
      }
    }

    //4カラム
    &_col4 {
      & > .b-card {
        @include mq(pc) {
          width: calc((100% - 6rem) / 4);
        }
        @include mq(sp) {
          width: 100%;
        }
      }
      //レイアウト崩れの対応
      &::before{
        content:"";
        display: block;
        width: calc((100% - 6rem) / 4);
        order:1;
      }
      &::after{
        content:"";
        display: block;
        width: calc((100% - 6rem) / 4);
      }
    }
}
TOP