📘

grid-template-columnsでReactコンポーネントを綺麗に並べる

に公開
CSS
React
frontend
CodePen
tech

はじめに

reactコンポーネントを複数使っているときに、それぞれを綺麗に配置したいと思っていた時、
ChatGPTくんと共に試行錯誤する中で、grid-template-columnsをcssの中で使用するやり方に辿り着きました。
これが意外と便利に見えたので、自分の理解・整理のために残しておきます。

grid-template-columns

grid-template-columnsはcssのプロパティの一種です。
グリッド列の線名とトラックのサイズ変更機能を定義することができるみたいです。
（MDN公式ドキュメント曰く）

codepenで試しに表示してみる

grid-template-columns: X Y;

の形で使用します。
Xは列方向の横幅、Yは行方向の横幅を制御しているみたいです。
X,Yは

  • 4pxのようなpx単位で指定
  • 1frのようにflex単位で指定
    みたいなやりかたがありそうです。
    MDN公式ではautoや1chのような指定の仕方も例示されていましたが、今回は使わなかったため割愛します。

codepenでは、簡単のために、divタグで並べています。内側のdivタグ(A~F)をreactコンポーネントに置き換えて考えてください。
（<A/>,<B/>,...,<F/>コンポーネントが並べられてるとイメージしてください)

さいごに

reactでコンポーネントを手作りしてみたり、作ったコンポーネントを使ってモック画面を作って遊んだりする中で理解を深めるのは面白いですね。
しかし、触っていくにつれて、frontendの奥深さ、道のりの長さをより一層強く感じてきています。
cssを完全に理解する道のりは遠そうです。

参考

・https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns

Discussion