Layout Decisions: Grid vs. Intrinsic
Learn to choose between a grid-based design (Grid) and a content-based design (Intrinsic) to create fluid and modern digital layouts.
The Modern Layout Dilemma
In the web of the early 2010s, everything was based on 12-column grids. Today, thanks to the capabilities of Figma (Auto Layout) and modern browsers (Flexbox/CSS Grid), design is becoming more fluid and less dependent on these fixed structures. The key question is: When should we force the grid and when should we let content rule the space?
1. The Grid-Based Approach (Layout Grid)
What is it?
It’s the classic grid of X number of columns with fixed “Gaps” (space between columns) and “Margins” (side margins). Elements must “fit” into these columns.
When to use it:
- Marketing Pages and Landing Pages: Where the visual hierarchy of large blocks is fundamental.
- Vertical Alignment Systems: To ensure different sections of the web have the same margins.
- E-commerce Platforms: To align product grids mathematically.
Advantages:
- Mathematical Consistency: Everything looks aligned and in place.
- Easy for Handoff: Developers perfectly understand 12 columns (e.g., Bootstrap or Tailwind).
2. The Intrinsic Design Approach (Intrinsic Layout)
What is it?
It’s an approach where the size of the container is defined by its smallest content (e.g., a button grows if the text is longer). The layout is the result of the relationship of elements with each other.
When to use it:
- Productivity Tools and Dashboards: Where data is uncertain and must fit into any space.
- High-Complexity Web Interfaces: Where elements must flow and self-organize (Wrap).
- Individual Component Design: A button, an avatar, or a navigation bar should always be designed with an intrinsic mindset.
Advantages:
- Maximum Flexibility: Adapts to any screen size without breaking the design.
- Content-Based Design: The design never breaks due to a username being too long.
Comparison: Grid vs. Intrinsic
| Feature | Layout Grid | Intrinsic Layout |
|---|---|---|
| Control | Parent container rules. | Child content rules. |
| Spacing | Based on fixed columns. | Based on constant Gaps (pixels or rem). |
| Responsiveness | Fixed breakpoints. | Fluid and continuous adaptation. |
| Ideal Use | Large structured blocks. | Living and dynamic components. |
The Hybrid Approach: The Best of Both Worlds
They are not mutually exclusive strategies. A well-structured product design uses Grids for high-level page layout (the general web structure) and Intrinsic Layout for designing internal components of that page.
For example, you could have a 12-column grid for your main page, but within one of those columns, have a form that uses Auto Layout (Intrinsic) so its fields and buttons stretch or shrink as needed.
Mentor’s Tips
- Design for real content: Stop using “Lorem Ipsum” and use real names. This is how you’ll see when an Intrinsic Layout is the best option.
- Use Auto Layout “Wrap”: It allows you to create card grids that jump to a new line automatically when they don’t fit, without needing to define a static grid.
- Define your Gaps: The secret to a good Intrinsic Layout is having a consistent spacing scale (tokens) (e.g., 4px, 8px, 16px, 24px) that applies to all Gaps in your system.
Useful Resources and Tools
- Jen Simmons: The New CSS Layout (The pioneer of Intrinsic Web Design).
- Figma Learn: Using Auto Layout for fluid designs
- MDN Docs: CSS Grid Layout (To understand the technical logic).
- Books: Designing with Web Standards by Jeffrey Zeldman.
intrinsic-sizing auto-layout-constraints responsive-scaling