# 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.

*Tags: ux, technique, ui-design, product-design, development*

---


> [!info] Quick Definition
> **Layout Grids** are predefined grids that force elements to follow a rigid structure of specific columns and distances. **Intrinsic Layout** is an approach where the size and position of elements depend on their content and internal relationship, without relying on an external grid.


## 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](https://www.youtube.com/watch?v=FEnRByQNNoA) (The pioneer of Intrinsic Web Design).
- **Figma Learn:** [Using Auto Layout for fluid designs](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-layouts-with-auto-layout)
- **MDN Docs:** [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) (To understand the technical logic).
- **Books:** *Designing with Web Standards* by Jeffrey Zeldman.
---
[[intrinsic-sizing]]
[[auto-layout-constraints]]
[[responsive-scaling]]


---

Source: https://www.fernandoux.com/en/wiki/techniques/layout-grid-vs-intrinsic/