Subjects and lessons to explore.

Law

UX/UI Design · Foundations

Layout

9 min read 5 practice questions
8 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

is the arrangement of elements on a page or screen — where the headings, images, buttons, and text sit and how they relate. Designers shape layout with four systems: grids, which give the page an invisible structure; columns, which divide that structure into vertical lanes; , which lines elements up along shared edges; and spacing, which sets the gaps between them. Empty space is a working part of layout, not leftover room. Layouts also have to adapt to different screen sizes, a topic of its own.

Why this matters

Every screen you open has a layout, whether anyone planned it or not. When elements are arranged with care, people find what they need without thinking about it; when arrangement is random, attention leaks into hunting and re-reading. Layout is also part of a design team's shared language: grids, columns, alignment, and spacing are decisions made on every project, and knowing their names lets you say precisely what is right or wrong about a screen. The same habits carry beyond screens to print, posters, and dashboards. Layout is where design stops being a collection of parts and becomes a place people can move through.

The college version

What layout is

Layout is the arrangement of elements on a page or screen: where the heading sits, how wide the text runs, and where the image goes. The working definition comes from the way the field describes what grids organize. Nielsen Norman Group defines a as a visual made up of columns, gutters, and margins that provides a structure for the layout of elements on a page, and the Interaction Design Foundation describes grid systems as aids for building designs, arranging information, and making consistent user experiences. So layout is the arrangement itself; a grid is the tool most often used to make it deliberate. Every screen has a layout whether anyone planned it; design happens when the arrangement becomes a set of choices. One honest framing: a layout is a hierarchy of decisions, from the page's overall structure down to the last . Which decision most shapes what people notice first is the visual hierarchy lesson's question; here the point is that the decisions exist and compound.

The four layout systems

Ask a designer how a page is arranged and four words come back: grids, columns, alignment, and spacing. A grid is the underlying structure of the page — the invisible frame that elements attach to. Columns are the vertical divisions of that frame — the lanes text and images flow down. Alignment is the practice of lining elements up along shared edges or shared centers, so related things visibly share a line. Spacing is the size of the gaps between elements — the air around buttons and between paragraphs. None of the four works alone. A grid sets the lanes, columns fill them, alignment keeps things on the lines, and spacing decides how much room each element gets. Together they are what makes a screen feel arranged rather than dumped.

The grid idea

The grid is the invisible scaffolding of layout. It is not drawn on the final screen, and users rarely notice it — but they feel it. Take a cooking site's recipe page, set on a twelve-column grid. The photo of the finished dish spans seven columns, the ingredient list sits in the three beside it, and the method runs across all twelve below. Gutters — the fixed gaps between columns — keep text from colliding with the photograph, and margins frame the page so content does not touch the screen's edge. Nielsen Norman Group lists three common grid types: grids, which divide a page into vertical columns; modular grids, which add rows so that columns and rows form cells; and hierarchical grids, which break the page into irregular zones sized by importance. Grids work because they are predictable: just as a city's regular street grid helps people find their way, a page grid gives users a consistent reference point for where to look next. The Swiss designer Josef Müller-Brockmann argued that mastering the grid takes practice.

Spacing and whitespace

Spacing includes both the gaps between elements and the larger empty regions of a screen — the . The research-backed view is that whitespace is a design tool, not wasted space. The Interaction Design Foundation describes it as a purposeful element that contributes balance and harmony, helps prevent accidental taps on touch devices, and can make a design feel professional and trustworthy. It also does grouping work. Nielsen Norman Group's form research shows that a label placed closer to its own field than to any other removes hesitation about where to type, and that grouping related fields helps people complete forms faster. The same logic scales: a page where related items sit close and unrelated items sit apart is a page people can read at a glance. Teams keep spacing consistent by working from a — a fixed set of gap sizes. The U.S. Web Design System, the design system for government websites, bases its spacing tokens on multiples of 8 pixels, so every gap comes from one family of values.

Alignment

Alignment is the practice of lining elements up along shared edges or shared centers. Left-aligned headings sit on the same vertical line as the paragraphs beneath them; a column of buttons shares a left edge; a grid of photo cards shares centers. The effect is simple and strong: consistent alignment reads as organized, and misalignment reads as carelessness, even when viewers cannot say why. Nielsen Norman Group notes that interface content is aligned to the columns of a grid — the grid supplies the lines, and alignment uses them. The decision is not whether to align but what to align to: left edges for reading text, centers for balanced elements, right edges rarely and for a reason. Whatever the choice, applying it consistently across the screen is what makes the page feel deliberate.

Responsive layouts, and the honest framing

A layout cannot be designed once and frozen. People read on phones, tablets, laptops, and wide monitors, and Nielsen Norman Group lists adapting to various screen sizes and orientations as a property of a good grid. How that adaptation happens — collapsing columns, reflowing content, choosing breakpoints — is the subject of the responsive design lesson in this course; here, layout is not finished until it works across sizes. That leaves the honest framing. A layout is a hierarchy of decisions: the grid, the columns, the alignments, the spacing, each choice constraining the next. Most of those decisions go unnoticed when they are good, which is the point. Deciding what people notice first is the next topic — visual hierarchy.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Layout is simply where things go on a screen. Designers arrange headings, pictures, buttons, and words so the screen is easy to look at and use, and they rely on four helpers. A grid is a hidden skeleton of columns that keeps everything lined up. Columns are the vertical lanes that content flows down. Alignment means lining things up along the same edge or center, so the screen feels tidy. Spacing is the size of the gaps between things — and empty space counts as a tool, not wasted room. A well-laid-out screen guides your eye without you noticing; a messy one makes you hunt for everything.

Picture it like this

Think of a well-set dinner table. The plates line up along the table's edge, the glasses stand in a row above them, and the cutlery keeps the same distance from every plate. Nobody needs a sign to know which glass belongs to whom — the arrangement carries that information. A screen layout does the same: alignment and even spacing tell people what belongs together and what comes next.

Where the picture stops working

A table is set once and stays that way, but screens change size — phone, tablet, wide monitor — so a layout has to bend and reflow, which is the responsive design lesson's job. And a tidy table does not tell you which dish to try first; deciding what draws the eye first belongs to visual hierarchy.

Worked example

The Harborline city-transit site presented its weekly timetable as a solid block of small text, with a different left margin on every page and buttons that shifted position from page to page. Riders kept misreading departure times. The redesign started from a twelve-column grid: timetable rows snapped to the grid lines, the search bar and the next-train card aligned to the same columns, and gutters kept columns from crowding. Spacing moved onto a fixed scale — gaps of 8, 16, and 24 pixels instead of whatever looked right that afternoon. Related information was grouped: each line's name, next departure, and delay sat together, with a little more space before the next line. Nothing about the transit data changed, only where it sat — and support calls about misread times fell sharply.

Key takeaway

Layout is the arrangement of elements on a page or screen, built from grids, columns, alignment, and spacing. Empty space is a working tool, consistent alignment reads as order, and every layout is a hierarchy of decisions — from the overall structure down to the last margin.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

How does this lesson define layout?

Choose an answer, then check it.
Question 2 of 3foundational

Which three parts make up a grid, according to the definition used in this lesson?

Choose an answer, then check it.
Question 3 of 3intermediate

A designer places each form label roughly the same distance from two different input fields, so users hesitate about which field the label belongs to. Which layout principle is being violated?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define layout as the arrangement of elements on a page or screen, attributing the working definition.
  • Name the four layout systems — grids, columns, alignment, and spacing — and describe the job of each.
  • Explain how a grid works as invisible scaffolding made of columns, gutters, and margins.
  • Explain why whitespace is a design tool rather than wasted space.
  • Apply consistent alignment and spacing to describe why a screen feels organized.
  • Distinguish layout from the sibling topics that build on it — visual hierarchy and responsive design.

Common mistakes

  • Treating empty space as wasted space and filling every gap with something, to 'use' the screen.

    Whitespace is a design tool. It groups related elements, separates unrelated ones, and rests the eye; the Interaction Design Foundation and Nielsen Norman Group both treat it as purposeful, so empty areas should be planned, not filled by reflex.

  • Using a different grid on every page of a product.

    A consistent grid across a product is what creates cohesion. Nielsen Norman Group's research shows grids help users scan and orient, and a page that switches structures forces users to relearn the layout each time.

  • Mixing alignments without a reason — centering some headings, left-aligning others, shifting margins per page.

    Pick edges and centers deliberately and apply them consistently. Elements aligned to the same columns read as organized; random alignment reads as carelessness even when viewers cannot say why.

  • Setting gaps by feel, so spacing is different everywhere.

    Work from a spacing scale — a fixed set of values such as multiples of 8 pixels, as the U.S. Web Design System uses — so every gap comes from one consistent family.

  • Treating layout as decoration added at the end of a project.

    Layout is a hierarchy of decisions made early: the grid, the columns, the alignments, the spacing, each constraining the next. Planning structure up front, with responsive adaptation in mind, beats rearranging a finished design.

Easily confused

Grid vs. Whitespace

The grid is the hidden structure that decides where elements go; whitespace is the deliberate emptiness around them. The grid organizes what is present, and whitespace manages what is not.

Alignment vs. Spacing

Alignment decides where elements sit relative to shared edges and centers; spacing decides how far apart they sit. One orders position, the other orders distance.

Layout vs. Visual hierarchy

Layout places elements on the page; visual hierarchy decides which element the eye meets first. Where things go versus what draws attention.

Column grid vs. Modular grid

A column grid divides the page into vertical lanes; a modular grid adds rows so columns and rows form cells. A simpler structure versus a finer-grained one.

Layout vs. Responsive design

Layout arranges elements at a given screen size; responsive design makes that arrangement adapt as the size changes. The arrangement versus the adaptation.

Key vocabulary

layout
The arrangement of elements on a page or screen, including where they sit and how they relate to each other.
grid
An invisible structure of columns, gutters, and margins that guides where elements are placed on a page.
column
A vertical division of a grid that content and interface elements align to.
gutter
The fixed empty space between the columns of a grid.
margin
The space between the edge of a page or screen and the content inside it.
alignment
The practice of lining elements up along shared edges or shared centers so they sit in orderly relation to each other.
whitespace
The empty areas of a screen between elements, used deliberately as a design tool rather than treated as leftover space.
spacing scale
A fixed set of spacing values, such as multiples of 8 pixels, that a design uses consistently for the gaps between elements.

Sources & references

  1. Using Grids in Interface Designs — Nielsen Norman Group
  2. Form Design Quick Fix: Group Form Elements Effectively Using White Space — Nielsen Norman Group
  3. Grid Systems — Interaction Design Foundation (IxDF)
  4. White Space — Interaction Design Foundation (IxDF)
  5. Layout grid — U.S. Web Design System (USWDS)
  6. Spacing units — U.S. Web Design System (USWDS)
  7. Responsive web design — Mozilla / MDN Web Docs

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-21

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.