CSS Gridコード生成ツールの使い方

列数・行数・間隔を入力すると、display: gridと列・行テンプレートを含むCSS Gridコードを生成できます。数字の列や行は、対応するrepeat形式に変換されます。

CSS Gridコードを生成する前に知っておきたいこと

CSS Gridの列数、行、間隔を指定して、レイアウトの土台になるCSS Gridコードを作成できます。列や行を数字で指定する基本的な使い方に加え、200px 1frのような列の記述も入力できます。まずは標準値でコードの形を確認し、必要に応じて列・行・間隔を調整すると使いやすいでしょう。

CSS Gridコードを生成する手順

1. CSS Gridコード生成ツールを開きます。
2. 列の入力欄に列数、または列幅の並びを入力します。列数を数字だけで指定すると、生成結果ではその数と1frを使うrepeat形式になります。200px 1frや1fr 1fr 1frのような文字列は、入力した記述が保持されます。
3. 行の入力欄に行数、auto、または行の記述を入力します。数字だけの行数は、autoを使うrepeat形式になります。autoや数字以外の文字列は、そのままの記述として扱われます。
4. 全体の間隔、列間隔、行間隔を必要に応じて入力します。全体の間隔と個別の間隔は、値が入力されている場合にpx付きでCSSへ反映されます。0などの無効と扱われる値は、該当する宣言が省略されます。
5. 生成を実行し、出力されたCSSを確認します。入力を省略した場合は、列3、行auto、全体の間隔10、列間隔0、行間隔0が使われます。列と行の入力は、解釈される前にテキストとして扱われます。

生成されたCSSの読み方と注意点

結果にはdisplay: gridと、列・行それぞれのテンプレート指定が含まれます。列に数字を入れた場合はrepeat(入力値, 1fr)に相当する宣言、行に数字を入れた場合はrepeat(入力値, auto)に相当する宣言を確認します。列幅を自由な文字列で指定した場合は、その記述が保持されるため、入力したCSSの意味が意図どおりかを出力側で確認してください。

間隔については、入力値がCSS単位を選ぶ形式ではなく、生成時にpxが付きます。全体の間隔を指定すると一般的なgap宣言が出力され、列間隔や行間隔を指定すると対応する個別宣言が追加されます。0のように省略される値では、対応する宣言が出力されない場合があります。数字以外の複雑な列・行表現を入力しても、数字と同じ変換が行われるとは限りません。

使用例

3列の均等なレイアウトを作るため、列数を3、行をautoにしてCSSの形を確認します。

列に3、行にautoを入力し、間隔を省略して生成を実行します。

display: grid、列テンプレート、行テンプレートを含み、列はrepeat(3, 1fr)に相当する宣言、行はautoの宣言になります。

制限事項

• 数字以外の列・行の記述は保持されますが、任意の表現が検証・解析されるとは限りません。また、間隔の数値にはpxが使われます。

よくある間違い

• 間隔にemやremなどの単位を付けて、入力した単位のまま出力されると考えるのは誤りです。数値の間隔はpxとして扱われるため、必要なピクセル値を入力し、全体の間隔と列・行間隔のどれを使うかを確認してください。

よくある質問

入力を省略した場合の初期値は何ですか？

列の入力を省略すると3列、行を省略するとautoになります。全体の間隔は10、列間隔と行間隔は0が初期値です。

列数や行数を数字で入力すると、どのようなCSSになりますか？

数字だけの列入力はrepeat(数値, 1fr)に相当する形式になり、数字だけの行入力はrepeat(数値, auto)に相当する形式になります。行のautoはこの行数変換の対象外です。

間隔にremやemを指定できますか？

間隔の値が入力されている場合はpx付きで出力されます。0などの省略される値では、全体または対応する個別の間隔宣言が出力されません。