Layout Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Negative Space (White Space)

Negative Space (often interchangeably called White Space) is the empty area around, between, and inside the subjects of an image, layout, or UI component. It is not necessarily "white"—it simply refers to any space free of text, images, or interactive elements. It is the breathing room that gives a web design structure and balance.

Masonry Layout

A Masonry Layout is a grid-based design style popularized by Pinterest, where items of unequal heights are placed in columns without strict, uniform horizontal rows. Instead of forcing every Card UI or image to be the exact same height, the layout dynamically positions the elements to fill vertical gaps, creating an interlocking, "brick-wall" aesthetic.

Element Spacing

Element Spacing refers to the intentional use of empty areas—often called White Space or Negative Space—between and around individual UI components (like buttons, paragraphs, images, and sections) on a webpage. In CSS, this is controlled mathematically using Margin (space outside an element) and Padding (space inside an element).

X-Axis (Horizontal Scrolling)

The X-Axis is the horizontal plane of a webpage (left to right). While standard web browsing relies almost entirely on vertical scrolling (the Y-Axis), the X-Axis is frequently utilized for specific interactive UI components, such as swipeable Carousels, Kanban boards, or horizontal pricing matrices, particularly on touch-enabled mobile devices.

Z-Index

While the X-Axis is width and the Y-Axis is height, the Z-Index is a CSS property that controls the Z-Axis—the "depth" or stacking order of overlapping elements on a webpage. If two elements overlap, the element with the higher Z-Index value will appear "in front" of or "on top" of the element with the lower Z-Index value.

Y-Axis (Vertical Scrolling)

In web design, the Y-Axis represents the vertical plane of a webpage—the dimension that users navigate by scrolling up or down. Because screen widths (the X-Axis) are physically constrained by the user's device (especially on mobile phones), the Y-Axis is theoretically infinite, serving as the primary canvas for digital storytelling and Information Architecture.

Relative Positioning

In CSS, position: relative is a layout property that places an element within the normal flow of the document, but allows developers to manually nudge it slightly (using top, bottom, left, or right values) relative to where it would have normally been. More importantly, it establishes a new coordinate system (a "reference point") for any child elements inside it that use Absolute Positioning.

Z-Pattern Layout

The Z-Pattern Layout is a model for organizing content on a simple, typically single-page or low-content website. It is an effective framework for ensuring key elements align with the user's natural Visual Hierarchy and User Flow.

Y-Axis Alignment

Y-Axis Alignment is a fundamental layout principle controlled by CSS (Cascading Style Sheets). It dictates the precise vertical positioning of elements within a container.

Padding

Padding is one of the two main properties (the other being Margin & Padding) used to control the visual spacing on a web page. Unlike margin (external space), padding is internal space that affects the size of the element's background or clickable area.

Margin & Padding

These two CSS properties are essential for achieving control over the Layout Grid and Visual Hierarchy: padding and margins.

Grid System

A Grid System provides designers and developers with a set of invisible columns and rows that all page elements adhere to. Common grids include 12-column systems, which offer maximum flexibility for different layouts.

Footer

The Footer is the structural section located at the very bottom of a webpage. Unlike the main body content which changes from page to page, the footer is a "global" component that appears consistently across the entire website. It serves as a secondary navigation hub and a repository for essential, but lower-priority, information.

F-Pattern Layout

The F-Pattern is a design concept based on eye-tracking studies that reveals how users naturally consume content on web pages. Instead of reading every word line-by-line, users typically scan horizontally across the top part of the screen, move down the page slightly, read across a shorter horizontal line, and then scan vertically down the left side of the text—forming a shape that resembles the letter "F".