脳死でCSS Gridが組めるライブラリを作ってみた

🙉< grid-columnとgrid-rowってどっちがどっちだっけ...??

🙉< grid-areaの指定ってどうやるんだっけ...??

🙉< grid組み直したらこんがらがってワケわかんなくなっちゃった

🙊< (言えない...チートシート見ないとgrid組めないなんて言えない...)

そんなグリッド難民を救済する(かもしれない)、Flexbox&Gridレイアウト用のmicro-libraryを作りました。

https://github.com/ToshihideMiyake/SpeedGrid.js

https://toshihidemiyake.github.io/SpeedGrid/

# 概要

要素にクラス名を記述すると、それに応じたinline CSSを自動で生成します。

クラス名を指定するだけで簡単にFlexboxやgridを扱えるので爆速でレイアウトを組むことができ、変更も容易です。

# 使い方

Tailwind CSSみたいなノリで使えます。

# Flexbox

親要素のクラス名に`flex-xxx-yyy`を指定。`xxx`は`justify-content`,`yyy`は`align-items`にそれぞれ対応します。

![](https://storage.googleapis.com/zenn-user-upload/f0da72f7ecac-20220125.png)

例えば子要素を上下左右中央揃えにしたい場合、親要素に`flex-center-middle`を指定します。

インラインstyleが生成され、実際には以下のようになります。

```html
<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で見てください。

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="PoOoNYa" data-user="toshihide2000" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/toshihide2000/pen/PoOoNYa">
  sample-flexbox</a> by toshihide (<a href="https://codepen.io/toshihide2000">@toshihide2000</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# grid

子要素のグリッドをグリッド線で指定します。グリッド線はcolumn/rowをX軸/Y軸とすることで、何も考えずに脳死でグリッドを組むことができます。親要素に対する`display:grid;`とグリッドトラックの設定は自分で行う必要があります。また、グリッド線は10未満である必要があります。

![](https://storage.googleapis.com/zenn-user-upload/a62da8f16052-20220125.png =500x)

例えば要素を上のように配置したい場合、親要素に`display:grid;`とグリッドトラックを設定し、子要素のクラス名を`<div class="grid-x-2/4 grid-y-3/4"></div>`とするだけで実現できます。

インラインstyleが生成され、実際には以下のようになります。

```html
<div class="grid-x-2/4 grid-y-3/4" style="grid-area: 2 / 3 / 4 / 4;"></div>
```

### デモ

モバイルでは×0.5で見てください（2回目）

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="QWOWEVg" data-user="toshihide2000" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/toshihide2000/pen/QWOWEVg">
  sample-grid</a> by toshihide (<a href="https://codepen.io/toshihide2000">@toshihide2000</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 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

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="LYOYRbE" data-user="toshihide2000" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/toshihide2000/pen/LYOYRbE">
  sample-gap</a> by toshihide (<a href="https://codepen.io/toshihide2000">@toshihide2000</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# なんで作った？

私自身、冒頭のような悩みを抱えておりまして、いろいろなgridのライブラリやフレームワークを漁っていたのですが、そのほとんどがカラム数の決まっている自由度の低いものだったり、便利だが学習コストが高かったりと、なかなか自分の理想のgridライブラリと出会えずにいました。

ならば自分で作ってしまおう！ということで作ったのがこの**SpeedGrid**です。

このライブラリを作る上で重要視したのはとにかく**わかりやすい**ということです。

覚えやすいように、また後から見返しても混乱することがないようにクラス名は単語を極力省略しない、columnやrow,主軸や交差軸といった概念は使わずX軸Y軸とするなど、**とにかく脳死で使えるライブラリ**を目指しました。

ただプログラムとしてはやっていることが単純すぎて芸がなく、１年後とかに見返したら恥ずかしくて顔真っ赤になっちゃうだろうな、とも思います。

でもまあやりたいことは実現できたのでヨシ!

恥ずかしくなったらまた更新します。

# ぜひ使ってください！

感想、フィードバックなどあれば是非！

https://github.com/ToshihideMiyake/SpeedGrid.js

公式(?)サイト👇

https://toshihidemiyake.github.io/SpeedGrid/