Result

CSS Gridを使った超シンプルなグリッドシステムです。
必須コードは5行くらいでカラム数は必要に応じて追加すれば完成します。

css

.grid-wrapper {
    display: grid;
    grid-gap: 0 2rem;
    grid-template-columns: repeat(12, 1fr);/*カラム数設定*/
    margin: 0 auto;
    width: 100%;
  }
/*任意*/
  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
}

html

<div class="container">
	<div class="grid-wrapper">
		<div class="col-3">
			<p>piyo</p>
		</div>
		<div class="col-3">
			<p>piyo</p>
		</div>
		<div class="col-3">
			<p>piyo</p>
		</div>
		<div class="col-3">
			<p>piyo</p>
		</div>

	</div>

	<div class="grid-wrapper">
		<div class="col-2">
			<p>hoge</p>
		</div>
		<div class="col-2">
			<p>huga</p>
		</div>
		<div class="col-2">
			<p>huga</p>
		</div>
		<div class="col-2">
			<p>huga</p>
		</div>
		<div class="col-2">
			<p>huga</p>
		</div>
		<div class="col-2">
			<p>huga</p>
		</div>
	</div>

	<div class="grid-wrapper">
		<div class="col-5">
			<p>hoge</p>
		</div>
		<div class="col-3">
			<p>hoge</p>
		</div>
		<div class="col-4">
			<p>hoge</p>
		</div>

	</div>
</div>

via

Super Simple Grids Using CSS Grid