今回の仕上がり
Layoutit Gridは、CSS Gridの列・行・余白を画面で調整する道具です。今回は2列・2行へ減らし、列を1frと2fr、gapを8pxと12pxにしました。以下は、その指定を自作のカードへ適用した結果です。ボタンで均等な2列とも比較できます。
公式画面で列・行・gapを設定する
- 公式ツールを開きます。今回の初期画面は3列・3行でした。
- 3列目の削除ボタン「remove column 3」と、3行目の「remove row 3」を押し、2列・2行にします。
- 2列目のサイズを2に変え、入力欄の外へ移動して確定します。単位はfrのままです。
- gapの2つの値を8と12にします。出力欄で、列が「1fr 2fr」、行が「1fr 1fr」、gapが「8px 12px」となったことを確認します。
- 自分のHTMLへ使うときは、その要素へdisplay: gridと列・行・gapの指定を加えます。空の領域指定だけでは中身は増えないので、子要素も置きます。
frは余った空間を分ける単位です。列の間には12pxの余白があり、画面の全幅がそのまま1:2になるわけではありません。長い英数字で崩れる場合は、最小幅と折り返しの実験で条件を切り分けられます。
作者・利用条件・確認範囲
作者表記はLeniolabsとコントリビューターの皆様。公式リポジトリのMIT許諾文全文を保存しています。Copyright (c) 2017-2020 Leniolabs。ソフトウェアの複製・組み込みでは著作権・許諾表示を残します。ここで配布するカードのHTMLは編集部の自作・CC0です。
2026年10月18日、PCブラウザで列・行の削除、列サイズとgapの入力、出力CSSを確認しました。今回の操作は登録・支払い・インストール不要でした。クリップボードへのコピー、全機能、スマホ実機での編集、AI利用の有無は未確認です。新作・流行・個人開発とは断定しません。