Not long ago, the only way we accessed the web was through desktop computers. In less than two decades, technological advancements have taken us from a predictable world of desktop monitors to one filled with smartphones, tablets, smartwatches, and connected TVs. In this universe of screens that fold and expand, web design had to reinvent itself. And in this quest for simpler development, a disruptive approach has emerged: Intrinsic Design.
Intrinsic Thinking
For years, the answer to the diversity of devices was traditional responsive design, heavily reliant on media queries. We defined specific breakpoints and rules for each screen size. It worked, but it was often labor-intensive and fragile.
Intrinsic Design proposes something different: using the natural characteristics of modern CSS to create layouts that adapt organically to their environment. Instead of dictating exactly how each element should behave in every situation, we allow them to naturally respond to the available space. This way, we create fluid and adaptable experiences, making full use of each element’s intrinsic capabilities.
Fundamentals of Intrinsic Design
While the concept of Intrinsic Design may seem new, its development took place between 2018 and 2019, when Jen Simmons was working as a Designer Advocate at Mozilla. During this period, she introduced this approach through influential talks and her YouTube channel, Layout Land. Through these materials, Jen highlighted the key principles of Intrinsic Design:
- Inherent flexibility: Elements automatically adjust to the available space.
- Local decision-making: Components respond to their immediate context without relying on complex global rules.
- Conscious use of space: Layouts maximize efficiency and aesthetics without wasting useful areas.
Intrinsic Design in Practice
Make no mistake—media queries are still essential! Intrinsic Design works in harmony with them rather than replacing them entirely.
The real shift in thinking is that:
We first focus on creating naturally adaptive layouts using intrinsic CSS properties, such as:
min-content/max-contentfit-contentauto-fit/auto-fillminmax()clamp()
We then use media queries strategically, only when necessary, for:
- Fine-tuning layouts
- Significant changes in element arrangement
- Device-specific adaptations
- Performance optimizations
It’s like an inverted pyramid—we start with natural, intrinsic responsiveness and only apply media queries where they truly make a difference.
Example: A Grid of Cards
A great example is when designing a card grid. Instead of defining exact breakpoints for different screen sizes, we can let CSS handle most of the adaptability.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
With Intrinsic Design, we can create something much smarter:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1rem;
}
And for specific situations, we can add media queries:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1rem;
}
@media (min-width: 1200px) {
.grid {
gap: 2rem; /* Mais espaço entre items em telas grandes */
}
}
It’s not magic, it’s common sense
What’s great about intrinsic design is that it doesn’t try to reinvent the wheel. Instead, it works with the fluid and adaptable nature that the web has always had. It’s like we’ve finally realized that we don’t need to control every pixel on the screen.
And no, this doesn’t mean ditching your media queries – they’re still super useful! The difference is that now they’re more for fine-tuning than for defining the entire layout structure.
The future is intrinsic
As more devices with different screen sizes emerge (hello, foldables!), this approach makes more and more sense. Instead of trying to predict every possible scenario, we create layouts that naturally adapt to any situation.
At the end of the day, intrinsic design is about working smarter, not harder. It’s about understanding that the web is naturally fluid, and sometimes the best thing we can do is let it do its job.
And if you want to know a little more about the CSS properties that impact this approach, I wrote an article about some of them, which even transform the way design tokens are implemented.
So, are you ready to let your layouts think for themselves?