Grid

In design, the invisible structure a layout is composed on — columns and gutters (twelve is the convention), a baseline for type, margins — so that elements align to shared lines rather than to each other by eye, and a page reads as one system across breakpoints

The grid is a design decision before it is a CSS one: how many columns, how wide the gutters, where the margins fall at each breakpoint, and what the baseline rhythm is. Figma frames carry it as layout guides; the 4-point grid note on this site is the spacing half of the same discipline. A component that is on the grid aligns its edges to columns; one that breaks the grid does so on purpose. CSS Grid is the tool that finally lets the design grid and the code grid be the same declaration.

Bootstrap’s grid system — .container, .row, .col-md-6 — twelve columns built first on floats, then flexbox, with breakpoint-prefixed classes that set how many columns an element spans at each width

The grid most of the estate’s AEM pages are laid out on, since the IVY components sit on a Bootstrap-era foundation, and the reason col-md-6 shows up in captured markup. It is a design grid encoded as class names: the twelve columns and the breakpoints are fixed by the framework, and a layout is a sentence of spans. Tailwind offers the same vocabulary as utilities (grid-cols-12, col-span-6) over CSS Grid; the migration from one to the other is mostly a rename.

In a component library, a data grid — a table with behavior: sorting, filtering, column resizing, virtual scrolling, inline editing, selection — AG Grid, TanStack Table, Nuxt UI’s UTable; the word the enterprise uses for what HTML calls a table

The third sense, and the one a product manager usually means. A grid in this sense is still a <table> underneath when it is done right, because that is the element assistive technology knows how to navigate; a grid built from <div>s needs the full ARIA grid pattern (role="grid", row, gridcell, roving focus) to be equivalent, which is a lot of work to reach where <table> starts. Choose by the data: records with attributes want the element; a spreadsheet wants the pattern.