どのGridプロパティを操作できますか？

grid-template-columns、grid-template-rows、gap等を視覚的に設定できます。

fr単位に対応していますか？

はい。fr、px、%等の単位を使用できます。

はい。コピーしたコードをそのままCSSファイルに貼り付けて使用できます。

処理はブラウザ上で完結し、データはサーバーに送信されません。

ビジュアルエディタでグリッドの列・行を設定でき、生成されたCSSにはgrid-template-columnsとgrid-template-rowsが含まれます。named areasの設定はテキスト編集で対応できます。

列数・行数・ギャップを設定してグリッドレイアウトを視覚的に構築。fr/px/auto等の単位に対応。

columnTemplate

rowTemplate

gap8px

preview

columnTemplate

1fr 1fr 1fr

rowTemplate

1fr 1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

どのGridプロパティを操作できますか？: grid-template-columns、grid-template-rows、gap等を視覚的に設定できます。
fr単位に対応していますか？: はい。fr、px、%等の単位を使用できます。
生成されたCSSはそのまま使えますか？: はい。コピーしたコードをそのままCSSファイルに貼り付けて使用できます。
データはサーバーに送信されますか？: 処理はブラウザ上で完結し、データはサーバーに送信されません。
grid-template-areas の設定は可能ですか？: ビジュアルエディタでグリッドの列・行を設定でき、生成されたCSSにはgrid-template-columnsとgrid-template-rowsが含まれます。named areasの設定はテキスト編集で対応できます。

最終更新日: 2026-02-21