HTMLサイトや自作テンプレートなどでCSSのグリッドシステムを導入しようかな？と思ったときに最初に思いつくのはBootstrapです。
ただし、Bootstrapはかなり重いです。
全ての機能は必要ないし、単純にグリッドシステムだけ欲しいのよ、という場合にはほかの選択肢があります。
色々ありますが、使ってみてよかったのはflexboxgridです。
Flex boxを実際に使った事例を学びたい
flexbox自体はIEガーという話を無視すればモダンブラウザで問題が起きることはありません。
従来、floatで構築していたほとんどの部分はflex boxで置き換える方が簡単だし、流用しやすいと思います。
グリッドシステムだけ欲しい
flexboxgrid
これが一番使いやすいと思います。
まず、grid以外の記述がないので他への影響がほとんどないです。
また、書き方などはBootstrapでお馴染みの記法なので簡単に使えます。
自分でflexboxでレスポンシブデザインのCSSを書くより全然効率が良いです。
ファイルサイズも小さい（12KB）ので読み込みのインパクトも少ないです。
使い方
CDNから読み込むだけで使えます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" integrity="sha512-YHuwZabI2zi0k7c9vtg8dK/63QB0hLvD4thw44dFo/TfBFVVQOqEG9WpviaEpbyvgOIYLXF1n7xDUfU3GDs0sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
box間のスペースを調整するのが面倒
paddingとそれを打ち消す逆marginでboxのスペースを調整しています。
どこをいじればいいのか、理解するのに時間がかかりました。
各colの左右にpaddingがされていますが、両端のcolのケアをしない代わりに、rowを親要素から左右0.5remづつはみ出させています。
こうすることで、レスポンシブでどのcolが折り返してもrowからはみ出ないようにしています。
colのスペースを調整したい場合は、この0.5remを変更すればいいです。
.row {
:
:
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
:
:
:
padding-right: 0.5rem;
padding-left: 0.5rem;
}simplegrid
CSSのgridを使ったシステムのように説明されていますが、中身を見るとfloatで構成されていて、flexboxですらありません。
実際使ってみると結構癖があってなんか使いにくかった印象があります。
グリッドシステムも使えるCSSフレームワーク
グリッドシステムだけでなく、その他のパーツのCSSも欲しいよ、という場合はグリッドシステムを含んだCSSフレームワークを使うといいと思います。
milligram
bulma
minicss
materialize
まとめ
自分が使いやすいグリッドシステムを一つ持っているかどうかで、急な案件への対応速度に違いが出ます。
グリッドだけ使いたいという場合は、今回ご紹介したflexboxgridを使うといいかもしれません。
