flexgrid

Flexgrid is a term used in web design to describe a grid layout that uses flexible sizing to adapt to varying screen sizes and content. It is not a single standard; rather, it covers approaches that rely on CSS Flexible Box Layout (Flexbox) or CSS Grid to arrange items into rows and columns that reflow as the viewport changes. In practice, a flexgrid consists of a container that defines how its child items should wrap and stretch, and grid items that participate in the defined grid structure.

Key principles include responsive behavior, where column counts and item widths adjust with breakpoints; proportional sizing, so that columns expand or shrink without fixed pixel widths; and content-driven wrapping, which preserves readability on small screens. Many implementations also offer alignment, ordering, and spacing controls, as well as performance features such as virtualization for large data grids.

Flexgrid is used in dashboards, image galleries, data tables, and other interfaces that require fluid layouts. It is commonly implemented with CSS: flexbox-based grids use display: flex and flex-wrap: wrap with flex: 1 1 auto on items; grid-based versions use display: grid with auto-fit or auto-fill columns. Some UI libraries provide a component called FlexGrid that adds features like sorting, editing, and virtualization on top of a grid, for example Wijmo’s FlexGrid.

The term is distinct from fixed-column grid systems and from masonry layouts, though it shares the overarching goal of maintaining a clean, responsive arrangement of content across devices.