Containerbredden

Containerbredden refers to the horizontal dimension of a layout container that holds the main content on a web page or application. It determines how much of the available width the content can occupy and is a key consideration in responsive and typographic design. The term is used in Danish and other Nordic design writings to describe the width constraint applied to content areas rather than the full viewport.

In practice, containerbredden is implemented by constraining an element with CSS, commonly by setting a max-width and centering the block with automatic margins. The content inside typically uses padding to create inner whitespace. The width may be fixed to a specific value or made responsive so it grows and shrinks with the viewport.

Responsive sites often adjust containerbredden at defined breakpoints. Frameworks and design systems provide predefined container widths at small, medium, large, and extra-large breakpoints to keep line length and visual balance consistent across devices. For example, a fluid container may stretch to 100% of the viewport up to a certain max width, after which it remains constant. Some popular frameworks define characteristic widths such as 540px, 720px, 960px, 1140px, and 1320px at successive breakpoints, though exact values vary by system.

In modern web design, containerbredden is related to, but distinct from, the overall page width. It interacts with grid systems, typography, and whitespace policies to support readable line lengths and a coherent layout.