Webサイトでカードを横に並べたとき、「高さがバラバラで見た目が悪い…」というお悩み、よくありますよね。
今回は親Boxと子Boxの設定だけで高さをきれいにそろえる方法を解説します！
1. 完成イメージ
こんなふうに、テキスト量が違ってもカードの高さがそろった状態を目指します。
2. 親Boxの設定
Step 1：親Boxを作成して、カードを入れる
- 「Box」を1つ作成（これが親Boxになります）
- 中に、複数のカード用のBox（子Box）を入れます
Step 2：親Boxのレイアウト設定
- 両端揃えを選択
- 「Direction（方向）」→
横（Row）
3. 子Box（カード）の設定
Step 3：子Boxのサイズ設定
- 子Boxの「Height（高さ）」→
Autoにする - 「Width（幅）」→
%や固定値に設定（例：33%で3列表示など）
これで、テキスト量に関係なく、すべての子Boxが同じ高さにそろいます！
4. 補足：見た目を整えるコツ
子Boxの余白（PaddingやMargin）を調整して、バランスを取りましょう
まとめ：Flexの基本設定だけで、高さがそろいます！
Gridを使わなくても、親Boxを両端揃え、横並び＋子Boxの「Auto」設定だけでカードの高さはきれいにそろえられます。
Studioはノーコードでもここまでできます✨
「デザインの見た目をもっと整えたい」「カードの中身がズレる」などのお悩みがある方、ぜひこの方法を試してみてください！
コメント