Bootstrap

いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。
使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。
また、その他コンポーネントやユーティリティも豊富に揃っており、人気のあるCSSフレームワークなので少し検索するだけで導入からちょっとしたカスタマイズ情報まで沢山出てくるのも特長です。

使用例：グリッド

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> ... </div>
<div class="col-xs-12 col-sm-6"> ... </div>
</div>
</div>

使用例：垂直方向の整列

上揃え・中央揃え・下揃えといった垂直方向で整列させたいときの使用例

<div class="container">
	<div class="row">
		<div class="col-xs flex-xs-top"> ... </div>
		<div class="col-xs flex-xs-middle"> ... </div>
		<div class="col-xs flex-xs-bottom"> ... </div>
	</div>
</div>

Bulma

Bootstrapと同様に様々なエレメントやコンポーネントも用意されているCSSフレームワークで、鮮やかなカラースキームも特長です。
シンプルなグリッドレイアウト以外にPinterestライクなタイルレイアウトを実装することもできます。

使用例：グリッド

<div class="columns">
	<div class="column"> ... </div>
	<div class="column"> ... </div>
	<div class="column"> ... </div>
	<div class="column"> ... </div>
	<div class="column"> ... </div>
</div>

使用例：Pinterestのようなタイルレイアウト

<div class="tile is-ancestor">
	<div class="tile is-vertical is-8">
		<div class="tile">
			<div class="tile is-parent is-vertical">
				<article class="tile is-child notification"> ... </article>
				<article class="tile is-child notification"> ... </article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child notification"> ... </article>
			</div>
		</div>
		<div class="tile is-parent">
			<article class="tile is-child notification"> ... </article>
		</div>
	</div>
	<div class="tile is-parent">
		<article class="tile is-child notification"> ... </article>
	</div>
</div>

Basis

上で紹介した2つとは違い、余計な装飾やコンポーネントを削減したシンプルな作りのCSSフレームワークです。
削減されたといってもよく使われると思うものはひと通りありますし、例えばBootstrapを使っても結局コンポーネントやカラー部分で大きく手を入れたりするというぐらいだったら、いっそのことこういったシンプルなものをベースに調整した方がいろいろやりやすいと思います。
その他Sass(SCSS)やgulpを普段から利用している場合は特にカスタマイズなどがしやすいとかCSS設計にFLOCSSを採用しているといった特長もあります。

使用例：グリッド

<div class="_c-row">
	<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
	<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
	<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
</div>

使用例：垂直方向の整列

垂直方向で中央揃えさせたいときの使用例

<div class="_c-row _c-row--middle">
	<div class="_c-row__col _c-row__col--1-3"> ... /div>
	<div class="_c-row__col _c-row__col--1-3"> ... </div>
	<div class="_c-row__col _c-row__col--1-3"> ... </div>
</div>

Flexbox Grid

その名の通り、Flexbox用いたグリッドシステムを実装できるシンプルなフレームワークです。
コンポーネントなどは必要なく、Flexbox使ったグリッドを実装したいだけというときに良いと思います。

使用例：グリッド

<div class="row">
	<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
		<div class="box-row"> ... </div>
	</div>
	<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
		<div class="box-row"> ... </div>
	</div>
	<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
		<div class="box-row"> ... </div>
	</div>
</div>

使用例：水平方向の整列

均等な間隔で整列させるjustify-content: space-between;の使用例

<div class="row between-xs">
	<div class="col-xs-2">
		<div class="box"> ... </div>
	</div>
	<div class="col-xs-2">
		<div class="box"> ... </div>
	</div>
	<div class="col-xs-2">
		<div class="box"> ... </div>
	</div>
</div>

Gridlex

こちらもFlexbox用いたシンプルなフレームワークです。
余計なものは必要ない、カスタマイズする前提でシンプルなものを探しているという人にはピッタリです。

使用例：グリッド

<div class="grid">
	<div class="col"> ... </div>
	<div class="col"> ... </div>
	<div class="col"> ... </div>
	<div class="col"> ... </div>
</div>

使用例：水平方向の整列

justify-content: center;やjustify-content: flex-end;の使用例

<div class="grid-3">
	<div class="col"> ... </div>
</div>
<div class="grid-3-center">
	<div class="col"> ... </div>
</div>
<div class="grid-3-right">
	<div class="col"> ... </div>
</div>

Grd

最後もシンプルで軽量なのが特長のフレームワークで、余計なコンポーネントなどは必要ない人向けです。
紹介サイト下部にセレクトを切り替えることでリアルタイムに見栄えを確認できるようになっており、目的の見栄えになったらそのときにセレクトで表示（選択）されているクラスを親要素に記述すればその見栄えを実装できます。

使用例：グリッド

<div class="Grid">
	<div class="Cell -3of12"> ... </div>
	<div class="Cell -9of12"> ... </div>
</div>

使用例：水平方向の整列

均等な間隔で整列させるjustify-content: space-between;の使用例

<div class="Grid -between">
	<div class="Cell -4of12"> ... </div>
	<div class="Cell -4of12"> ... </div>
	<div class="Cell -4of12"> ... </div>
</div>