Terms by topic · 51 guides

Layout & CSS

Learn how content gets its size, place, spacing, layers, and shape on each screen.

01 / Atlas

All Layout & CSS terms

Open a term for a simple meaning, an example, when to use it, how official it is, and its code name.

01 · Core
App Shell

An app shell is the small frame that stays while page content changes. It usually holds navigation, identity, and status.
02 · Core
Aspect Ratio

Aspect ratio tells how wide an element is compared with how tall it is.
03 · More detail
Backdrop Blur

Backdrop blur softens what sits behind a clear surface. It doesn't blur the surface’s own content.
04 · More detail
Bento Grid

A bento grid packs tiles of different sizes into one layout. Larger spans show which content matters most.
05 · More detail
Block Formatting Context

A block formatting context, or BFC, is a separate area for block layout. It keeps floats inside and stops some margins and floats from affecting content outside.
06 · Core
Box Model

The CSS box model explains an element’s size. Each box has content, padding, a border, and margin.
07 · Core
Breakpoint & Media Query

A breakpoint is where a layout needs to change. A media query applies CSS when the viewport or device meets a stated condition.
08 · Core
Card Grid

A card grid repeats cards that can be compared. The number of columns changes with the available space.
09 · More detail
Cascade Layers

Cascade layers are named groups that set the order of CSS rules. The browser checks this order before it compares selector specificity.
10 · Core
Centered Column

A centered column has a readable maximum width and equal-looking space on both sides.
11 · Core
clamp()

`clamp()` chooses a preferred CSS value but keeps it between a minimum and a maximum.
12 · More detail
Container Query

A container query lets CSS adapt a component to its own container. It checks that container’s size or style instead of only the viewport.
13 · More detail
Containing Block

A containing block is the rectangle an element uses to work out its position and percentage size.
14 · More detail
CSS Anchor Positioning

CSS Anchor Positioning places one box relative to another named anchor element.
15 · Core
CSS Cascade

The CSS cascade is the set of rules a browser uses when several styles target the same thing. It checks where each rule came from, its importance, context, layer, selector weight, scope, and order.
16 · More detail
CSS Custom Property

A CSS custom property is a reusable CSS value, often called a CSS variable. It follows the cascade and can change by scope or theme.
17 · Core
CSS Grid

CSS Grid is a layout system for rows and columns together. It can set fixed areas or change them as space changes.
18 · Core
CSS Inheritance

CSS inheritance lets some properties copy a value from a parent element. This happens when the child has no value of its own.
19 · Core
CSS Logical Properties

CSS logical properties describe sides by writing flow, such as block and inline. They replace fixed directions like top, right, bottom, and left. This helps layouts follow the language's writing direction.
20 · More detail
CSS Nesting

CSS nesting is built-in syntax for writing one style rule inside another. The browser still follows CSS rules for reading selectors and their weight.
21 · Core
CSS Positioning

CSS positioning says what an element is placed against. It may use normal flow, itself, an ancestor, or the viewport as its reference.
22 · Core
CSS Selector

A CSS selector is a pattern that finds elements on a page so styles can be applied to them.
23 · Core
CSS Specificity

CSS specificity is the weight of a selector. When other cascade rules tie, the browser uses this weight to choose which style wins.
24 · More detail
Documentation Layout

A Documentation Layout combines navigation, an article, examples, its outline, and next links in one reading view.
25 · Core
Fixed Position

CSS fixed positioning places a box relative to a fixed container, usually the browser window. The box normally stays in place while the document scrolls.
26 · Core
Flexbox

Flexbox is a CSS layout system for one direction at a time. It lines up and spreads items across a row or a column.
27 · Core
Gap

Gap is space that a container puts between its Flexbox or Grid children. The same rule applies to every pair.
28 · More detail
Intrinsic Sizing

Intrinsic sizing lets an element's content help decide its size instead of using only a fixed size from outside.
29 · Core
Margin

Margin is the space outside an element’s border. It keeps that element away from nearby layout items.
30 · More detail
Masonry Layout

A masonry layout packs items of different heights into columns. Items fill vertical gaps without sharing row lines.
31 · More detail
max-content

`max-content` is the size content would like if it did not wrap at normal break points.
32 · More detail
min-content

`min-content` is the smallest size content can use after wrapping at every allowed break.
33 · Core
minmax()

`minmax()` is a CSS Grid function that gives a row or column both a minimum and a maximum size.
34 · Core
object-fit

`object-fit` controls how an image, video, or similar item fits inside its box.
35 · Core
Opacity

Opacity says how solid an element and its children look. It can range from clear to solid.
36 · Core
Overflow

Overflow is what happens when content is larger than its box. CSS can show it, clip it, or let people scroll it.
37 · More detail
overscroll-behavior

`overscroll-behavior` controls what happens when a scrolling area reaches its edge. It can stop the scroll from continuing into a parent area and can change the edge effect.
38 · Core
Padding

Padding is the space inside an element’s border, between its content and its edge.
39 · Core
Pseudo-class

A pseudo-class is part of a CSS selector. It finds an element by a condition, such as state, place, language, or user action.
40 · Core
Pseudo-element

A pseudo-element lets CSS style a part or box with no normal element in the source HTML. Examples include the first letter and generated decoration.
41 · More detail
Scroll Snap

CSS Scroll Snap lets a scrolling area stop at chosen alignment points after people scroll.
42 · Core
Single-Page Layout

A Single-Page Layout puts one main story or task on one long page.
43 · Core
Spacing

Spacing is empty space placed on purpose. It groups related items, separates ideas, and gives a page rhythm.
44 · More detail
Stacking Context

A stacking context is a local group of CSS layers. Items are ordered inside the group first, then the whole group is placed among other groups.
45 · More detail
Stacking Context & Z-index — Learning Bundle

This learning bundle connects two CSS ideas. A stacking context keeps its paint order separate. z-index orders boxes that can take part inside that context. The bundle is not one standard CSS term.
46 · More detail
Sticky & Fixed Position — Learning Bundle

This learning bundle compares two CSS position values. sticky stays in normal flow until it reaches a set point in its scroll container. fixed is placed against a fixed-positioning containing block. The bundle is not one CSS term.
47 · Core
Sticky Position

CSS sticky positioning starts like normal relative positioning. As the page scrolls, the box can stay at a set edge, but only inside its containing block.
48 · More detail
Subgrid

A subgrid is a grid inside another grid that shares its parent's row or column sizes. It can share one direction or both.
49 · Core
Text Truncation

Text truncation cuts off text to save space. An ellipsis shows that one or more lines are missing.
50 · Core
Viewport Units

Viewport units are CSS lengths based on the browser's visible area. Small, large, and dynamic versions handle browser bars that appear or hide.
51 · Core
z-index

z-index is a CSS property that sets the front-to-back level of a positioned box. In some cases, it also creates a new local stacking context.