Making CSS from Good to Great
The Power of Subgrid
🥑 Developer Advocate 🥑
What is CSS Grid?
A two-dimensional grid-based layout system,
optimised for user interface design.
Why is Grid a good thing?
Grid is the only layout technique that establishes a relationship between rows and columns of grid items.
Using DevTools to learn Grid
Live demo
And this Subgrid thing?
Allows nested grids to participate in
the sizing of their parent grids
Using DevTools to learn Subgrid
Live demo
Improve DevTools for Grid in Chromium
Chromium bug tracker
References
- CSS Flexible Box Layout Module Level 1
- CSS Grid Layout Module Level 1
- CSS Grid Layout Module Level 2
- Codrops reference: Subgrid
- Subgrid on MDN
- Grid Level 2 and Subgrid
- Why display: contents is not CSS Grid Layout subgrid
- CSS Grid Level 2: Here Comes Subgrid
- Grid by Example
- Researching a Property in the CSS Specifications
Thank you!
Font is M+ by Coji Morishita.