A dimension is an axis: a reference direction along which a position or component is measured. In a browser, a two-dimensional viewport uses a horizontal x-axis and a vertical y-axis. Their intersection is the origin, normally the viewport’s top-left corner. section 1.4.9
Dimensions make frontend positions calculable. Positive x values move right, positive y values move down, and pixels are the default unit. Negative values and values beyond the viewport are valid, so an element can sit partly or entirely outside the visible area. section 1.4.9
The same idea appears in several frontend calculations:
- CSS Grid treats columns as one dimension and rows as another; their intersections form placement cells. section 4.1.2
- LAB color uses three dimensions: lightness, green–red, and blue–yellow, allowing color differences to be described numerically. section 7.1.3
- A movement vector uses x and y dimensions to describe displacement, direction, and distance. section 10.1
A full-viewport hero
Set one dimension to the viewport width and the other to its height: .hero { width: 100vw; height: 100vh; }. The element then scales across both viewport axes. section 1.4.9
Table 1.9 Some uses of coordinate systems in CSS and JavaScript
Use the coordinate-system table to connect dimensions with getBoundingClientRect(), mouse coordinates, and viewport-responsive font sizing. section 1.4.9
