# Data grid
> Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
Display labeled data in a compact datagrid - a responsive list of title and content pairs, ideal for detail panels and summaries.
Source: https://docs.tabler.io/ui/components/datagrid
---
## Overview
Use the `.datagrid` class to lay out label and value pairs. Each pair is a `.datagrid-item` with a `.datagrid-title` for the label and a `.datagrid-content` for the value.
The datagrid is a CSS grid that fits as many columns as the available width allows, so it reflows on its own - there is nothing to set per breakpoint.
```html
Registrar
Third Party
Port number
3306
Age
15 days
```
## Content types
A value is a plain container, so it takes anything: text, [avatars](/ui/components/avatar), [statuses](/ui/components/status), icons or [form controls](/ui/forms/elements). Mixing them keeps a detail panel compact.
```html
Registrar
Third Party
Nameservers
Third Party
Port number
3306
Expiration date
–
Creator
Paweł Kuna
Age
15 days
Edge network
Active
Avatars list
JL+3
Checkbox
Icon
Checked
Form control
Longer description
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
## Column width
Columns are generated with `auto-fit`, so the item width decides how many fit in a row. Set the two custom properties on the `.datagrid` element to change the layout:
| Variable | Description | Default |
|------------------------------|--------------------------------|----------|
| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |
## Accessibility
The pairs are only visually connected, so tell assistive tech how they belong together.
- A screen reader reads a `div` based datagrid as loose lines of text. When the pairs matter, use a description list instead: `dl.datagrid`, then `div.datagrid-item` wrapping a `dt.datagrid-title` and a `dd.datagrid-content`. The styles are class based, so nothing changes visually.
- Keep the label short and meaningful on its own. "Expiration date" works out of context, "Date" does not.
- When a value is empty, write it out - a dash or "Not set" - instead of leaving the cell blank.
- A value that is a form control still needs its own label. Use the `.datagrid-title` as that label by pairing `for` and `id`, or add an `aria-label` to the control.
```html
Registrar
Third Party
Expiration date
–
```
## SCSS variables
Use these SCSS variables to customize the datagrid. The default values are:
```scss
$datagrid-padding: 1.5rem;
$datagrid-item-width: 15rem;
$datagrid-title-margin-bottom: 0.25rem;
```
_Source: `core/scss/_variables.scss`_