CSSグリッドの作成

CSSグリッドの作成 — サイズや色を指定し、コードや結果を確認. 入力値は端末内で処理されます。登録不要.

登録不要

ツールを読み込み中…

使い方

入力範囲と単位を確認してください。結果は入力条件とブラウザに基づきます。

広告配信で通信情報を処理する場合があります。パーソナライズはプライバシー選択に従います。プライバシー（英語）

実際のエンジンに以下の例を入力した結果です。個人の入力や保存作業は使いません。ツールの例読込で同じ入力を確認できます。

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

入力条件

以下は入力検証の許容範囲であり、すべての値が現実的・適切だと保証するものではありません。