Subgrid is supported in Firefox 71+, Safari 16+, and Chrome 117+ (September 2023). As of 2024, all major modern browsers support subgrid. For older browsers, you can use @supports (grid-template-columns: subgrid) to provide fallback styles.

A regular nested grid defines its own independent track sizes (e.g., 1fr 1fr), which may not align with the parent grid's columns. Subgrid inherits the parent's track sizes, gaps, and line names, so child elements align precisely with the parent's grid lines. This is essential for consistent multi-level layouts like article sections, card grids, and form alignments.

Yes! You can independently set grid-template-columns: subgrid while keeping grid-template-rows as regular track definitions (or vice versa). This gives you fine-grained control — for example, aligning columns across nested sections while letting rows size independently.

Common use cases include: Article layouts (aligning content across multiple sections), card grids (keeping card headers/footers aligned), form layouts (aligning labels and inputs across grouped sections), dashboards (consistent widget alignment), and product listings (uniform pricing/description alignment).

No — gap is not inherited through subgrid. The subgrid inherits track sizes and line names, but you can set an independent gap (or row-gap / column-gap) on the subgrid container. Setting gap: 0 on the subgrid makes its items sit flush with the parent's grid lines.