はじめに
今日は、これから先使えそうなCSS gridをみてましょう。
Bootstrapのグリッドシステムはかなり有名で説明は多分いらないと思いますが、今日はそのグリッドシステムを再現してみます。
コード
早速ですが、まずコードをみてみましょう。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
たったの２行で、グリッドカラムをできるなんてすごいでしょう。
説明
1行目のdisplay: gridは、Flexboxのdisplay: flexと同じようにCSS Gridを有効するために書く必要があります。
2行目は少し複雑ため、もう少し細く分けて説明します。
grid-template-columns：列のレイアウトを定義するルールです。
repeat([何回], [列幅])：CSS grid限定な関数で、同じ列サイズを複数で作りたいときに使う関数です。
.wrapper {
/* 以下の行の意味を表す */
grid-template-columns: 10px 10px 10px 10px 10px;
grid-template-columns: repeat(5, 10px);
}
auto-fill：数字を指定する以外、auto-fillを指定したらブラウザの幅にそって出来るだけ指定した列幅を詰めます。
例として、
- ブラウザ幅：860px
- 列幅：100px
- 列の数 =
(int)860 / 10 = 8
minmax(min, max)：もう一つのCSS grid専用関数が、グリッド幅か高さの最小と最大な値が指定できます。
全部を合わせると、repeat(auto-fill, minmax(120px, 1fr))は
できるだけ、同じサイズなカラムを詰め込んで、でも幅は少なくても120pxにして
という意味です。
実例
Codepenで実例を作ってみました。
https://codepen.io/adwinying/full/RqmPQJ
まとめ
CSS gridは、IEが対応していないので、本番に使うのはまだオススメできません。
しかし、今後CSS gridで何かできるのか期待しててワクワクします。😻