11. Dezember 2021
The RAM Layout Pattern
No media queries, layout designed from the inside out
- RAM (Repeat, Auto, Minmax)
- Tldr
- No media queries, the layout is designed from the inside out.
- Alternative names
- fluid columns
- intrinsic design
- responsive grid columns
- Resources:
- https://web.dev/patterns/layout/repeat-auto-minmax/ by [[Una Kravets]]
- https://css-tricks.com/responsive-layouts-fewer-media-queries/#using-auto-fit-and-minmax by [[Temani Afif]]
- Code
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
- How to design for the RAM pattern
- You only have to specify the min width of one child item.