# Aligned grids Aligned grids are two or more independent `` instances kept in lockstep: **horizontal scroll** and **column-resize widths** propagate between them. Use it for a budget-vs-actuals comparison, or a totals grid pinned under a body grid, where the columns must stay lined up. Give every grid in the set the same non-empty `alignedGridGroup`: ```svelte ``` > Live demo: Aligned grids - https://svgrid.com/demos/182-aligned-grids/ ## What syncs - **Horizontal scroll** - scrolling one grid scrolls the others to the same `scrollLeft`. - **Column widths** - resizing a column mirrors to the matching column (by `id`) in every other grid in the group. Vertical scroll and selection stay independent (each grid owns its own rows). ## Notes - Declare the **same columns** (matched by `id`, falling back to `field`) in each grid so widths map one-to-one. Give each grid its **own** column-array instance. - Only user resizes are mirrored; default and `fitColumns` widths already match when the columns and container widths match. - Any number of grids can share a group; add/remove one and the rest keep working. Groups are independent - use different strings for unrelated sets. ## Two grids, one group Scroll either grid sideways and the other follows; drag a column edge and the matching column resizes in both. Nothing is shared but the group string - the two grids have their own data, their own selection and their own vertical scroll. ```svelte

Budget

Actuals

``` ## A totals strip under the body The common shape: a tall body grid and a one-row grid beneath it carrying the totals. Same group, same column ids, so the totals stay under the right numbers however far the body is scrolled. ```svelte ``` ## See also - [Column sizing](https://svgrid.com/docs/help/columns/column-sizing/) - [Multi-grid sync](https://svgrid.com/demos/70-multi-grid-sync/) - sharing *data* (not layout) via `$state` --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/columns/aligned-grids/ . All docs: https://svgrid.com/llms.txt