a11y.skipToMainContent
1

CSSグリッドジェネレータ

CSSグリッドレイアウトを視覚的に構築する — 列、行、ギャップを設定し、サイジングを追跡し、生成されたCSSをコピーします.

px
px

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Grid Generator

  1. グリッドの列と行の数を設定します.
  2. Fr、px、auto、minmaxなどのトラックサイジングユニットを選択します.
  3. 列ギャップと行ギャップを調節し、正当性および整列性度を調整します.
  4. 生成されたグリッドCSSをコピーしてプロジェクトに貼り付けます.

CSSグリッドジェネレータとは?

このツールは、2次元CSSグリッドレイアウト用のインタラクティブな遊び場です。 display: Grid を宣言することで、コンテンツを列と列に同時に配置し、このジェネレータはあなたのためのトラック定義をビルドします。

必要な列と行数を選択し、フレキシブルfrユニット、固定ピクセル、オート、応答性の高いminmax()範囲を選択し、列と行のギャップを追加します。 数値化されたセルの更新は、実際のグリッドに住んでおり、出力はrepeat()を使用して、スタイルシートにコピーすることができます。 ブラウザでローカルで実行されます。

Advertisement

FAQ

Frユニットは、グリッドトラックサイジングでどういう意味ですか?
Frユニットは、グリッドコンテナ内の空き容量のほんの一部を表しています。 Repeat(3, 1fr) を使用すると、利用可能なスペースを共有し、コンテナのサイズとして応答性を拡張および縮小する3つの同等幅の列を作成します.
Fr ではなく minmax() を使うべきですか?
Minmax(80px、1fr) などのフロアと天井の両方を必要とするトラックで、列を 80px 以上まで保持しますが、スペースを埋めるために成長させます。 プレーンfrは最小限で、小さな画面で読みやすい幅下で縮小できます.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Grid Generator on Wikipedia·Developer Tools on Wikipedia·CSS Grid Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement