Web・UI・CSS
カードを等間隔に並べたい。FlexboxとGridで試したい
使うツール
カードを三列へ並べたいだけなのに、最後の一枚だけ下へ落ちたり、長いURLが全体を押し広げたりします。そこでカード幅を少しずつ削る前に、親が何を並べる仕組みなのかを確認しましょう。Gridは行と列の関係を決めたい場面、Flexboxは一方向へ並べる項目の配置を調整したい場面で考えやすくなります。ツールの簡単なプレビューを使い、設定の効果を切り分けます。
まずは三列・16pxの隙間を作る
Flexbox・Grid生成でGridを選び、列数3、行数1、隙間16、プレビュー項目数3にします。生成されるgrid-template-columnsはrepeat(3, minmax(0, 1fr))です。三つの列が、隙間を除いた空間を等しく分ける構成です。たとえば内側の利用可能幅が960pxなら、二つの隙間32pxを引いた928pxを三分します。幅の33.333%を三つ置いてから隙間を追加する考え方とは異なります。
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;項目数を5へ増やすと、三列の次の行へ二つが並びます。列数を2にすると、同じ五項目でも三行になります。入力する行数は明示的な行の指定で、表示項目の上限ではありません。項目が増えた場合にどこへ流れるかを確かめるため、最初からぴったり三件だけで試さず、四件や五件の状態も見ます。
Flexboxへ切り替えると、何を決めるかが変わる
Flexboxへ切り替えると、方向、主軸方向の配置、交差軸方向の揃え方を試せます。横並びならrow、縦ならcolumnです。生成CSSにはflex-wrap:wrapが含まれますが、これだけで三列の均等カードになるわけではありません。子要素の幅やflex-basisなどが、何枚入るかに影響します。ツールが生成するのは親側の配置設定で、既存カードの全スタイルを置き換えるものではありません。
space-betweenは余った空間を項目間へ配る指定です。最後の行が二項目だけなら、左右へ大きく離れて見える場合があります。全行の列位置をそろえたいならGridを検討し、ツールバーのように項目の自然な幅を生かしたいならFlexboxで配置を試します。どちらが新しいかではなく、揃えたい関係が何かで選ぶ方が、あとから例外を足す量を減らせます。
短いサンプルだけでは、長い内容の問題が見えない
均等な箱が並んだら、実ページでは長い見出し、改行しにくいURL、画像、二行のボタンなどを入れて確認します。minmax(0, 1fr)は列の最小幅を0へ下げられる指定ですが、内部の文字を自動で適切に折り返す万能設定ではありません。子要素がはみ出す場合には、どの内容が幅を要求しているかを調べ、必要な折り返しや内部スクロールをその部分へ設定します。
align-items:stretchなら同じ行で高さをそろえやすくなりますが、カード内のボタンがすべて同じ位置へ移るとは限りません。外枠の高さと、中身の配置は別だからです。まず親の行・列を確認し、その後でカード内部の縦並びや余白を調整します。原因が別の階層にあるのに親のgapだけを変え続けると、別の画面幅でまた崩れやすくなります。
三列を維持するより、読める列数へ変える
サイドバーがあるページでは、1440pxの画面でもカード領域が1440pxあるわけではありません。まず実際の親の幅を見て、カードの文字と操作が収まるかを確認します。狭ければ二列、一列へ変更する設計が必要です。この生成ツールはメディアクエリーを自動で一式作る機能ではないので、生成した基本CSSに対し、実サイトの幅条件を別に設計します。
余白を削り、文字を小さくして三列へ押し込むより、縦へ流して読める方がよい場合があります。320px程度の幅、拡大表示、長い翻訳で、ページ全体の横スクロールが出ないかを確認します。コードや表のように横幅が必要な部分は、ページ全体ではなくその領域で扱います。列数を変えることと、情報を隠して減らすことは別です。
見た目の順番と、読む順番をそろえる
row-reverseやcolumn-reverseで見た目を反転しても、HTMLの順番まで同じように変わるとは限りません。キーボードのTab移動や読み上げが、目に見える並びと食い違わないかを試します。配置が美しく見えることと、操作の順番が理解しやすいことは両方必要です。CSSで順番を大きく変える前に、文書の並び自体を適切にできないかを考えます。
試す順番は、三項目で基本配置、五項目で折り返し、実際の長文で内容の制約、狭い幅で列数、最後にキーボード操作です。一度に全部の設定を変えると、どれが効いたか分からなくなります。ツールで最小の配置を作り、実ページへ戻して一つずつ足す使い方なら、『なぜ一枚だけ下へ落ちるのか』という疑問を、親の幅、隙間、子の内容へ分けて調べられます。
三つの同じ箱から、三つの違う内容へ進める
プレビューで三列がきれいにそろったら、実装先で一枚だけ長いタイトル、二枚目に大きな数値、三枚目に複数の操作ボタンを置いた場合を確認します。短い番号だけの箱では、折り返しや高さの違いが見えません。縦方向をそろえる指定があっても、カード内のボタンが同じ高さに並ぶとは限らず、内側の構成も必要です。ここで生成するCSSは外側の配置を試す出発点であり、実際のカード内容まで完成させるものではありません。
長いURLや改行されないコードが入る場合、列の計算が正しくても内部の要素が幅を押し広げることがあります。何でもoverflowを隠すと必要な内容まで読めなくなるため、通常の文章は折り返す、コードや表はラベル付きの内部スクロールへ置くなど、内容に応じて扱います。スクロールがページ全体へ発生していないかも見ます。この生成画面の短いサンプルが収まることと、利用者が入力する長い内容が収まることを同じ確認として扱わないようにします。
確認順序は、広い画面の列数、サイドバーを含めた実際の領域、狭い画面の縦並び、文字拡大、キーボードでの移動です。見た目をそろえるためにCSSだけで順序を入れ替えると、Tabで進む順番と見える順番がずれることがあります。重要な操作が最後まで到達できるかを実画面で確かめます。余白や列数の調整と、読み順・操作順の設計はつながっています。生成した宣言を貼るだけで終わらず、実データを入れた画面へ戻って確認するところまでが使い方です。