Bootstrapを使わずに、Bootstrap風のグリッドシステムを実現する方法

Bootstrap4は非常に便利なのですが、グリッドシステム以外はあまり使わないという方が多いのではないでしょうか？

公式サイトからBootstrap4をダウンロードして「bootstrap-grid.css」を読み込めばグリッドシステムの機能だけを使うことができます。

しかし、クライアントから「Bootstrapを使わずに制作してください」という要望が入る場合があります。その場合、これから説明する方法を使えば、Bootstrapを使わずに、Bootstrapの様なグリッドシステムが実現できます。

完成形は以下の画像。

（クリックすると画像が大きく表示されます）

Bootstrapを使わずにBootstrap風のグリッドシステムを実現する方法

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="card">
  <div class="card__contents flexBox">
    <article class="card__block col-xs-12 col-md-6 col-lg-4">
      <div class="card__block--frame"><img src="images/card-img-01.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル１</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
    <article class="card__block col-xs-12 col-md-6 col-lg-4">
      <div class="card__block--frame"><img src="images/card-img-02.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル２</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
    <article class="card__block col-xs-12 col-md-6 col-lg-4 order1">
      <div class="card__block--frame"><img src="images/card-img-03.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル３</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
    <article class="card__block col-xs-12 col-md-6 col-lg-4">
      <div class="card__block--frame"><img src="images/card-img-04.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル４</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
    <article class="card__block col-xs-12 col-md-6 col-lg-4">
      <div class="card__block--frame"><img src="images/card-img-05.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル５</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
    <article class="card__block col-xs-12 col-md-6 col-lg-4">
      <div class="card__block--frame"><img src="images/card-img-06.jpg" alt=""></div>
      <h3 class="card__block--title">タイトル６</h3>
      <div class="card__block--lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </article>
  </div>
</section>
</body>
</html>

style.scss

$breakpoint: (
  xs: "only screen and (min-width: 0px)",
  sp: "only screen and (min-width: 280px)",
  xs-sp: "screen and (min-width:0px) and ( max-width:479px)",
  md: "only screen and (min-width: 480px)",
  lg: "only screen and (min-width: 787px)",
  xl: "only screen and (min-width: 1147px)"
);

@mixin media ($device) {
  @media #{map-get($breakpoint, $device)} {
    @content;
  }
}

//------------ グリッド ---------------
.col-xs-12{
  width: 100%;
  margin: 0 0 30px;
}

@include media("xs-sp"){
  .order1{
    order: 1;
  }
  .order2{
    order: 2;
  }
  .order3{
    order: 3;
  }
  .order4{
    order: 4;
  }
  .order5{
    order: 5;
  }
  .order6{
    order: 6;
  }
}
@include media('md'){
  .col-md-6{
    width: calc(100% / 2 - 15px);
  }

}
@include media('lg'){
  .col-lg-4{
    width: calc(100% / 3 - 20px);
  }
}
//------------ flexBox ---------------
.flexBox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
//------------ card ---------------
.card__contents{
	width: 100%;
	padding: 0 30px;
	margin: 30px auto;
	@include media('xl'){
		max-width: 1146px;
	}
}
.card__block{
	padding: 10px;
	background-color: #dfdfdf;
	border-radius: 4px;
}
.card__block--title{
	margin: 20px 0;
	font-weight: bold;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}

※ CSSはSASS表記で説明しています。

※ style.scssは、グリッドシステムを実現させる部分だけを抜粋しています。

（reset.cssやbodyのフォント指定など、いろいろ端折ってます）

※ autoprefixerを使用しているという前提で「ベンダープレフィックス」は書いていません。