脳死でCSS Gridが組めるライブラリを作ってみた
🙉< grid-columnとgrid-rowってどっちがどっちだっけ...??
🙉< grid-areaの指定ってどうやるんだっけ...??
🙉< grid組み直したらこんがらがってワケわかんなくなっちゃった
🙊< (言えない...チートシート見ないとgrid組めないなんて言えない...)
そんなグリッド難民を救済する(かもしれない)、Flexbox&Gridレイアウト用のmicro-libraryを作りました。
概要
要素にクラス名を記述すると、それに応じたinline CSSを自動で生成します。
クラス名を指定するだけで簡単にFlexboxやgridを扱えるので爆速でレイアウトを組むことができ、変更も容易です。
使い方
Tailwind CSSみたいなノリで使えます。
Flexbox
親要素のクラス名にflex-xxx-yyyを指定。xxxはjustify-content,yyyはalign-itemsにそれぞれ対応します。
例えば子要素を上下左右中央揃えにしたい場合、親要素にflex-center-middleを指定します。
インラインstyleが生成され、実際には以下のようになります。
<div class="flex-center-middle" style="display: flex; justify-content: center; align-items: center;"></div>
flex-xxxもしくはflex-yyyでjustify-contentとalign-itemsの一方だけを指定することもできます。
デモ
モバイルでは×0.5で見てください。
grid
子要素のグリッドをグリッド線で指定します。グリッド線はcolumn/rowをX軸/Y軸とすることで、何も考えずに脳死でグリッドを組むことができます。親要素に対するdisplay:grid;とグリッドトラックの設定は自分で行う必要があります。また、グリッド線は10未満である必要があります。
例えば要素を上のように配置したい場合、親要素にdisplay:grid;とグリッドトラックを設定し、子要素のクラス名を<div class="grid-x-2/4 grid-y-3/4"></div>とするだけで実現できます。
インラインstyleが生成され、実際には以下のようになります。
<div class="grid-x-2/4 grid-y-3/4" style="grid-area: 2 / 3 / 4 / 4;"></div>
デモ
モバイルでは×0.5で見てください（2回目）
gap
gapプロパティもクラス名から設定できます。column-gapとrow-gapはそれぞれgapx-、gapy-になります。
デフォルトの単位はpxですが、%とemも使うことができます。
Simple Usage
gap-nn (nn=number)
最も簡単な指定方法です。columnとrowの一括指定、px単位です。
Options
- gapx-nn
- gapy-nn
- gap-per-nn
- gapx-per-nn
- gapy-per-nn
- gap-em-nn
- gapx-em-nn
- gapy-em-nn
デモ
モバイルでは（ry
なんで作った？
私自身、冒頭のような悩みを抱えておりまして、いろいろなgridのライブラリやフレームワークを漁っていたのですが、そのほとんどがカラム数の決まっている自由度の低いものだったり、便利だが学習コストが高かったりと、なかなか自分の理想のgridライブラリと出会えずにいました。
ならば自分で作ってしまおう！ということで作ったのがこのSpeedGridです。
このライブラリを作る上で重要視したのはとにかくわかりやすいということです。
覚えやすいように、また後から見返しても混乱することがないようにクラス名は単語を極力省略しない、columnやrow,主軸や交差軸といった概念は使わずX軸Y軸とするなど、とにかく脳死で使えるライブラリを目指しました。
ただプログラムとしてはやっていることが単純すぎて芸がなく、１年後とかに見返したら恥ずかしくて顔真っ赤になっちゃうだろうな、とも思います。
でもまあやりたいことは実現できたのでヨシ!
恥ずかしくなったらまた更新します。
ぜひ使ってください！
感想、フィードバックなどあれば是非！
公式(?)サイト👇
Discussion