Fullrow

Fullrow is a layout concept in modern web design describing a row that spans the entire width of its containing element. It is not a distinct HTML tag; rather, it refers to how an element is positioned within grid or flex layouts so that it occupies all horizontal space in its row. This approach is commonly used to create sections that extend from edge to edge of a page or container.

In CSS grid, a fullrow is achieved by placing an item from grid-column: 1 to -1, which makes it cover all grid tracks in that row. In a flexbox layout, a fullrow can be produced by an item with width: 100% or by using a flex: 0 0 100% configuration within a horizontal flex container. Many UI frameworks implement fullwidth behavior through a column that spans the full grid width (for example, a 12-unit column in a 12-column grid) or by providing utilities to remove horizontal gutters.

Common use cases for a fullrow include hero sections, banners, wide media embeds, and separators that should extend across the entire viewport or container width. They are also used to create visual breaks between content blocks, reinforcing a clear structural hierarchy.

Considerations when implementing a fullrow include managing gutters and padding to achieve the intended edge-to-edge look, ensuring responsive behavior to avoid horizontal scrolling on smaller viewports, and preserving accessibility and semantic structure. Proper use of headings, landmarks, and ARIA roles helps maintain clarity for assistive technologies.