Grid

The grid helps you place content with consistent alignment, spacing, and hierarchy across screen sizes. It gives designers and developers a shared structure for page regions, cards, forms, and dense product layouts. Use the grid to guide layout decisions, not to force every screen into the same shape. Content should determine where the layout changes, which container strategy fits, and how much space sits between regions.

---

​

Grid anatomy

BEEQ grid layouts are built from columns, gutters, and margins. These three parts control where content sits, how regions separate, and how much breathing room the layout keeps at the viewport edge.

​

Columns

Columns define the vertical tracks that content can span. A 12-column structure is flexible because it divides cleanly into halves, thirds, fourths, and sixths.

​

Gutters

Gutters are the space between columns. They separate layout regions and should use BEEQ spacing values so the page rhythm matches the components inside it.

​

Margins

Margins are the space outside the grid columns. They keep content away from viewport edges and can be fixed, fluid, or responsive depending on the container strategy.

---

​

Grid types

Different grid types solve different layout problems. Most product screens use a column grid, while editorial, data-heavy, or text-heavy screens may need supporting structure from baseline, manuscript, or modular grids.

---

​

12-column layout

Use a 12-column grid when a screen needs flexible region widths. It lets you create common spans such as full width, half width, thirds, fourths, and sidebars without inventing a new structure for each screen.

---

​

Breakpoints

BEEQ breakpoint ranges are design guidance for deciding when a layout should change. They are not generated classes, custom screens values, or a container API. Use app-level media queries, container queries, or the layout tools already in your application to implement responsive behavior. Add a breakpoint when the content needs a different layout, not because a range exists in the table.

---

​

How grid works in code

Use native CSS Grid for page structure and BEEQ spacing tokens for gutters, margins, and padding. CSS Grid is broadly supported and robust enough for most product layouts, so BEEQ keeps the grid guidance framework-agnostic instead of shipping layout-specific utilities. Use gutters to separate layout regions. Do not place content inside the gutter itself.

---

​

Container strategies

Containers control how wide a layout can become and how it responds to available space. Choose the strategy that protects the content, not the one that fills the most pixels.

---

​

Responsive and adaptive layouts

Responsive and adaptive layouts both help interfaces work across screen sizes. The difference is how much the layout changes.

​

Responsive

Responsive layouts use one content structure that reflows as space changes. This is the default approach for most BEEQ product screens because it keeps behavior predictable and avoids duplicate markup.

​

Adaptive

Adaptive layouts use different structures for different contexts. Use them when a screen needs a meaningfully different experience by device, input method, or available space.

---

​

Usage guidelines

---

​

Accessibility

Grid accessibility depends on preserving meaning when the visual layout changes.

• Keep source order logical. Do not use visual placement to make screen reader or keyboard users jump across unrelated content.
• Support zoom and narrow viewports without horizontal scrolling for core page content.
• Avoid using position alone to communicate priority, state, or relationships. Pair layout with headings, labels, and text.
• Keep long text in comfortable containers. Wide grids should not force paragraphs into lines that are hard to read.
• Test responsive changes with keyboard navigation so focus order still matches the user’s reading path.

---

​

Resources