Subgrid
CSS Subgrid
A Grid feature allowing child grids to inherit and align with the parent grid's track sizing for consistent layouts.
Technical Detail
CSS Subgrid creates a two-dimensional layout by defining explicit or implicit tracks. grid-template-columns and grid-template-rows accept flexible units: fr (fractional), minmax(), auto-fill, auto-fit. Named grid areas via grid-template-areas provide a visual ASCII-art layout definition. Subgrid (level 2) allows nested grids to align with parent tracks. Grid outperforms flexbox for page-level layouts, dashboard panels, and any design requiring simultaneous row and column alignment.
Example
```css
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.sidebar { grid-row: 1 / -1; }
```
Related Tools
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator