Centering, Subgrid & Container Queries
18 min read
CenteringContainer QueriesSubgridcqwplace-items@container
Modern Layout Techniques
The Evolution of Centering
| Era | Technique | Code |
|---|---|---|
| 2000s | margin: auto + known width | margin: 0 auto; width: 600px; |
| 2010s | Absolute + Transform | position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); |
| 2015+ | Flexbox | display:flex; justify-content:center; align-items:center; |
| 2020+ | Grid (shortest) | display:grid; place-items:center; |
Container Queries — The Game Changer
Media queries respond to viewport size. Container queries respond to the parent element's size. This is revolutionary for reusable components.
A card component can now style itself differently when placed in a narrow sidebar vs. a wide main content area — without knowing anything about the viewport.
How Container Queries Work
- Mark a parent as a container:
container-type: inline-size - Query its size with
@container
Container Query Units
| Unit | Relative To |
|---|---|
cqw | 1% of container's width |
cqh | 1% of container's height |
cqi | 1% of container's inline size |
cqb | 1% of container's block size |