この CSS レイアウト生成について
左側で Flexbox または Grid を選び、方向・主軸 / 交差軸の揃え・折り返し・列数・行の高さ・隙間をプルダウンと数値入力で調整します。右側のデモエリアにはいくつかのカラーブロックでレイアウトがリアルタイムに反映され、表示どおりの結果が得られます。
確定すると対応する宣言型の CSS（Flex は display / flex-direction / justify-content / align-items / flex-wrap / gap、Grid は display / grid-template-columns / grid-auto-rows / gap）が出力され、そのままコピーしてプロジェクトで使えます。外部ライブラリに依存せず、すべてブラウザ内で動作します。