Grid system and modularity

1) Why mesh

• accelerates design and development (common language: "12 columns, gutter 24"),
• reduces cognitive load (even rhythm, stable lines),
• Increases the portability of components between pages
• allows you to build a modular library without "microlaying."

2) Basic mesh elements

Container - maximum content width, centered area.
Columns - vertical areas for placing modules.
Gutter - horizontal space between columns.
Margin - external fields to the left/right of the container.
Row/Track - horizontal guide (in CSS Grid - lines/tracks).
Baseline - vertical typography grid.

Recommended vertical rhythm: 8-pt (sometimes 4-pt for nuances), units of sizes and indents are multiples of 4/8.

3) Breakpoints and containers

• Raster container (fix. max-width) on large screens, fluid - on mobile.
• Gutter can smoothly increase to large breakpoints.
• Columns - 4/6/8/12 as "core set."

4) Modularity and densities

Module - a block of content that occupies 1..N columns and multiples of baseline heights.

• Comfort (dashboards, reading): larger fonts, indents 16-24.
• Compact (tables, pro-mode): fonts + 0/ − 1 px, vertical indents − 4/ − 8, row heights are fixed (multiples of 8).

Components shall have two presets of minimum density.

5) Typography and baseline grid

Select the basic line-height (for example, 24 px) and synchronize the heights of the elements (buttons 40/48/56 px are multiples of baseline).
Headings anchor vertical rhythms: above/below indents are multiples of 8.
Align the icons to the height of the text.

6) Layout templates

6. 1 Cards

Grid: mosaic (fix. card width) or column (card = N columns).
Minimum content heights to avoid "jumping" when loading; skeleton within the card.
Internal padding: 16/20/24 depending on breakpoint.

6. 2 Tables

Full width container; freeze the first column/cap when scrolling horizontally.
Cells are baseline-fold; numeric columns are aligned by digits/decimals.
On XS - "stacked layout" instead of horizontal scrolling if there are too many columns.

6. 3 Forms

Single-column on XS/SM, two- or three-column on MD + (taking into account the logic of tabs/sections).
Field + label + help text fit into a common module (heights are multiples of 8).

6. 4 Dashboards

Grid with fixed tracks and clouds (areas) for stability.
Widgets have minimum and maximum widths in columns; heights are multiples of baseline.
When resaying - the number of columns changes, do not split widgets arbitrarily.

7) Adaptability, auto-layout and behavior

Content in front of the grid: The grid adjusts to the content rather than breaking it.

• Use constraints (left/right/center) and auto-layout for cards/lists.
• Support component options for XS/SM/MD/LG (paddings change, slot order).

• At the section level - CSS Grid (areas, columns, rows).
• Inside the components - Flex (axes, balance of spaces).

8) CSS Grid/Flex - Workshop

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Indents and tokens

Capture scales in the design system.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• The internal indents of the components are from 'space'.
• The outer fields of the containers are from 'gutter '/' margin'.
• Element heights are multiples of 8 (40/48/56).

10) Modular components

• know how many columns it takes on each breakpoint;
• have minimum/maximum dimensions;
• do not depend on "magic" pixels - only tokens;
• keep the internal grid (title, content, footer) on baseline.

11) Images and media portions

Fix aspect-ratio (e.g. 16/9, 4/3, 1/1) for previews and cards.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

On XS, use full-bleed (picture around the edges) only for promo, the rest of the content follows the container.
Image text - only on slips/overlays, contrast ≥ AA.

12) RTL and localization

The grid direction mirrors: 'dir = "rtl"' and ': dir (rtl)' -rules for indents/icons.
Column order and frozen columns in tables - consider mirroring.
The length of the lines and transfers can change the heights of the modules - lay down the stock.

13) The specifics of iGaming

Promo areas and banners: a separate grid with large modules; text is always on the plate, AAA contrast for critical notifications (18 +, limits, risks).
Leaders/ratings: tables with a fixed first column and a sticky header, tabular numbers (tabular-nums), row heights are multiples of 8.
Dashboards of players/operations: widgets (sessions, deposits, RTP, Net Deposits) occupy 3-6 columns on a 12-grid; cascade rebuild on MD/SM.
Tournament cards: grid of cards 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA in a permanent location.

14) Accessibility and focus

Focus rings should not break the rhythm: add outline-offset or an internal pseudo-element.
Minimum click size: 44 × 44 (mobile) / 32 × 32 (desktop).
Do not encode meaning by placement only; Save the text labels and aria attributes.

15) Performance

Reduce the depth of nesting grids: 1 main grid section + flexes inside.
Avoid heavy shadows/masks on hundreds of cards; Use flat styles in lists.
Lazy loading of media content; fixed proportions prevent CLS.

16) Antipatterns

"Grid to taste" consistency → crumbles on each page.
Gutter varies arbitrarily by section.
Inconsistent densities (both compact and comfort in one screen).
Magic width-dependent components (no columns/tokens).
Tables with horizontal scrolling on mobile without alternative layout.
Text in the image without dies and contrast control.

17) QA checklist

Structure

• Columns/container/margines correspond to breakpoints.
• Gutter is stable within the page.
• Heights and indents are multiples of 8.

Components

• Column widths (XS.. XL) and min/max are defined.
• Internal grids are aligned with baseline.

Tables/Forms

• Sticky-cap/first column; stacked mode on XS.
• Form fields are multiples of baseline; label/help text does not "jump."

A11y

• Focus styles don't break the rhythm; clique zones ≥ minimal.

Performance

• No CLS due to media blocks; lazy loading is enabled.

18) Tokens and documentation in the design system

• the values' container ',' columns', 'gutter', 'space', baseline;
• examples of layouts (cards/tables/forms/dashboards);
• density presets (Comfort/Compact) and their effect on components;
• code snippets for CSS Grid/Flex and Figma styles/layouts.

Brief Summary

Grid is a contract between design and development. Capture breakpoints, containers, speakers and 8-pt rhythm, design tokens and layout templates, provide density options, adaptability and availability. Then the pages scale predictably, the components are reused, and the command is faster and more stable.