CSS Grid＆Flexboxジェネレーター

GridとFlexboxを切り替えながら、列数・行数、またはFlexアイテムの方向・配置・アイテム間の間隔（gap）を調整でき、コンテナ内の色付きボックスによるライブプレビューを見ながら正確なCSSコードをコピーできます。

すべての処理はお使いの端末内で行われ、サーバーには何も送信されません。

列3行2間隔（Gap）12px

CSSコード

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

既製の図形（円・三角形・星・吹き出しなど）を選んで、clip-pathのCSSコードをコピーします。

2つの制御点をドラッグして独自のモーションイージングカーブを視覚的にデザインし、cubic-bezierのコードをコピーします。

すりガラス風のカード効果を視覚的にデザインし、そのまま使えるCSSコードをコピーします。

ツールライブラリ全体を見て、今すぐ必要なものを使い始めましょう — 無料・登録不要です。