はじめに
Mantineでレイアウトを組むときに、Layoutのためのコンポーネントがいくつか用意されていますが、種類がいくつかあり似た様なものがあって、どれを使うのが最適なのか迷いがちなので、今後の自分のためにもまとめてみました。
この記事はFlex系のCSSを理解していることを前提としています。
Flex系のコンポーネント
MantineドキュメントのサイドバーのLayoutでFlex系のコンポーネントは以下のものになります。
それぞれについて簡単な解説をしていきます。
※下に行くほど自由度は増えますが、極力上の方からに最適なコンポーネントを選ぶことで、無駄のないコードが書けると思います。
※スクショ背景黄色の部分がコンポーネントを利用している箇所になります。
Center
内包するコンテンツを縦横中央寄せにしたい時に使用します。
propsも無いため、かなりシンプルです。
利用例
Stack
内包するコンテンツを縦積みにしたい時に使用します。
flex-direction: columnを指定したい場合に使えばよいです。
利用例
Group
内包するコンテンツを横並びにしたい時に使用します。
Flexのwrapの設定が必要ない時に使うものと思っておけばよさそうです。
何気にalign-items: centerがデフォルトで設定されてるのがミソ👍
利用例
SimpleGrid
これは厳密にはFlex系ではない（※）ですが、次で紹介するGridをよりシンプルにしたものです。
グリッドシステムは子要素でカラムの値を指定して、レイアウトを組むことが多いかと思いますが、親要素でカラム数を決めて子要素を同サイズにすることができます。
カラム数5とかGridでやろうと思うとめんどくさいので、そういった場合にサクッと使えばいいかと思っています。
Flexではなくgridが使われています
利用例
Grid
グリッドシステムを利用したい時に使用します。
propsでFlex系のプロパティが指定でき、自由度の高いレイアウトが組めそうです。
利用例
※背景黄色にしてもわかりづらいので、devtoolで該当箇所を選択しています。
Flex
cssで書くFlexと同じことができます。
Flexを理解してるなら、とりあえずこれ使っておけば大概のレイアウトは組むことができるでしょう。
言わずもがなため利用例は割愛します。
まとめ
自分用にまとめたものですが、誰かのお役に立てば幸いです。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。