{ "name": "utilities/grid", "title": "Grid", "description": "Use the `ed-grid` class to arrange elements into rows and columns: tiles that adapt to the available space on their own, or twelve columns your elements span per step.", "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/grid/", "sections": [ { "heading": "Grid", "markdown": "Use the `ed-grid` class to arrange elements into rows and columns: tiles that adapt to the available space on their own, or twelve columns your elements span per step.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Examples", "markdown": "Grids work especially well for card lists and content designed for browsing.\n\n```html\n
\n
\n
\n \"\"\n
\n

Tulip

\n Tulipa gesneriana\n
\n
\n
\n \"\"\n
\n

Peony

\n Paeonia officinalis\n
\n
\n
\n \"\"\n
\n

Poppy

\n Papaver rhoeas\n
\n
\n
\n \"\"\n
\n

Sunflower

\n Helianthus annuus\n
\n
\n
\n \"\"\n
\n

Daisy

\n Bellis perennis\n
\n
\n```\n\n```html\n
\n \n
\n \n \n \n
\n Population (Zion)\n \n 251,999\n -3% \n \n
\n
\n \n \n
\n \n \n \n
\n Minds Freed\n \n 0.36%\n +0.03% \n \n
\n
\n \n \n
\n \n \n \n
\n Agents Discovered\n \n 3\n ±0% \n \n
\n
\n \n \n
\n \n \n \n
\n Sentinels Controlled\n \n 208\n +1% \n \n
\n
\n \n
\n\n\n```" }, { "heading": "Sizing", "markdown": "By default, grid items will wrap when the grid's column size is less than `20ch`, but you can set a custom minimum column size using the `--ed-grid-min-column-size` property.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```\n\n### Keeping the columns\n\n`ed-grid` stretches its items when there are fewer than fit in a row. `ed-grid-fill` keeps the empty columns instead, so two items in a wide grid stay as wide as the columns a full row would have.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Gap", "markdown": "By default, the gap between grid items uses `--ed-space-4` from your theme. Add any [`ed-gap-N`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/gap) class (N from 0 to 16) to an element with `ed-grid` to specify the gap between items.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Span Grid", "markdown": "You can add `ed-span-grid` to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Twelve columns", "markdown": "As soon as one child carries a span class, the grid has twelve equal columns and every child says how many it takes: `ed-span-1` to `ed-span-12`, and per step `ed-span-sm-6`, `ed-span-md-4` and so on. This is the grid for rows of form fields and for a page laid out in columns. Without a span class on any child, `ed-grid` stays the tile grid above; `ed-span-grid` is the full row in both and switches nothing.\n\n```html\n
\n \n \n \n \n \n
\n```\n\n```html\n
\n Revenue\n Costs\n Margin\n Open items\n
\n```\n\n### Steps\n\nA step class takes effect from its width up and wins over the base class and the steps before it. The widths are where a number of fields of a comfortable 12rem fit side by side with the default gap. At `md`, four fields sit exactly on the field floor of 8.75rem, so short values such as a postcode can go four to a row with `ed-span-md-3`.\n\n| Step | From a grid width of | Fields of 12rem side by side | Default for a child without a span |\n| --- | --- | --- | --- |\n| — | 0 | 1 | `12` |\n| `sm` | 25rem | 2 | `6` |\n| `md` | 38rem | 3 (4 on the floor) | `4` |\n| `lg` | 51rem | 4 | `3` |\n| `xl` | 77rem | 6 | `2` |\n\nCompose a row, not a field: the fields that share a line get spans that fit together, so a narrow field beside a wide one is `3` and `9`, two equal ones `6` and `6`. A row with fewer fields keeps their width and leaves the rest of the line empty — two dates stay `3` and `3` rather than stretching to `6` and `6`, because a field's width says how long its value is.\n\nA child that names only a later step, such as `ed-span-lg-3`, takes the full row before it. A child without any span class takes the default of the step, so it reads as one tile among others. `--ed-grid-min-column-size` and `ed-grid-fill` have no effect in this mode.\n\n### Measured on the grid, not the window\n\nThe steps follow the width of the grid itself, so a form shows the same layout in a page, a dialog and a drawer: a drawer of 25rem gets two fields to a row on any screen. That is why the grid takes its width from where it stands and not from its content, the condition every container query sets. In a box that sizes itself by its content it shrinks to almost nothing — the first child of `ed-flank`, a child of `ed-cluster`, a popover without a width. Put it where it gets a width: a block of its own, the flexible side of `ed-flank`, or a box with a set width.\n\n### From MUI's Grid\n\n| MUI 5 | eurodata-ui |\n| --- | --- |\n| `` | `
` |\n| `` | `
` |\n| `spacing={2}` | an `ed-gap-N` class |\n\nThe step names are MUI's, the widths are not: MUI switches on the window at 600, 900, 1200 and 1536 pixels, `ed-grid` on its own width at the steps above. `xs={true}` and `xs=\"auto\"` have no counterpart yet." } ] }