お問い合わせはコチラから

シンプルなflex boxのCSSで構築されたグリッドシステムが便利

サイト運営

HTMLサイトや自作テンプレートなどでCSSのグリッドシステムを導入しようかな?と思ったときに最初に思いつくのはBootstrapです。

ただし、Bootstrapはかなり重いです。

全ての機能は必要ないし、単純にグリッドシステムだけ欲しいのよ、という場合にはほかの選択肢があります。

色々ありますが、使ってみてよかったのはflexboxgridです。

Flex boxを実際に使った事例を学びたい

flexbox自体はIEガーという話を無視すればモダンブラウザで問題が起きることはありません。

従来、floatで構築していたほとんどの部分はflex boxで置き換える方が簡単だし、流用しやすいと思います。

Grid for layout, Flexbox for components - Ahmad Shadeed
Learn when to use flexbox and CSS grid with examples and use cases.

グリッドシステムだけ欲しい

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" />
flexboxgrid - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Grid based off of CSS3 flexbox specification - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by ov...

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

Milligram - A minimalist CSS framework
Milligram - A minimalist CSS framework

bulma

Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

minicss

mini.css - Minimal, responsive, style-agnostic CSS framework
mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.

materialize

Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.

まとめ

自分が使いやすいグリッドシステムを一つ持っているかどうかで、急な案件への対応速度に違いが出ます。

グリッドだけ使いたいという場合は、今回ご紹介したflexboxgridを使うといいかもしれません。

タイトルとURLをコピーしました