CSS Subgridで作るインタラクティブレイアウト入門

CSS Subgridは、ネストされたグリッドアイテムが親グリッドのサイズ決定に参加できるようにする強力な機能です。これにより、複雑な計算や固定寸法なしで、親と子のグリッドアイテム間の完璧な整列が可能になります。

このインタラクティブデモでは、以下の操作ができます：

• スライダーを使用してグリッドアイテム間の間隔を調整
• 親グリッドの列数と行数を変更
• Subgridのオン/オフを切り替えて整列の違いを確認

Subgridが有効な場合、ネストされたグリッドアイテム（Sub A-F）は親グリッドトラックと完全に整列します。無効な場合、独自の独立したグリッドシステムを作成します。

ガイドラインは親グリッド構造を示しており、Subgridがネストされたコンポーネント間でどのように整列を維持するかを簡単に確認できます。