# dds-grid-item



<!-- Auto Generated Below -->


## Overview

A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect.

## Usage

### Grid-item

#### Spanning columns

A grid item takes one cell of its grid. Set `colspan` to make it cover more columns, for a full-width header over a row of narrower items.

```html
<dds-grid grid-template-columns="repeat(2, 1fr)" gap="m">
  <dds-grid-item colspan="2">Header</dds-grid-item>
  <dds-grid-item>Left</dds-grid-item>
  <dds-grid-item>Right</dds-grid-item>
</dds-grid>
```

#### Spanning rows

`rowspan` does the same on the block axis. The items that follow flow around it.

```html
<dds-grid grid-template-columns="1fr 2fr" gap="m">
  <dds-grid-item rowspan="2">Sidebar</dds-grid-item>
  <dds-grid-item>Top</dds-grid-item>
  <dds-grid-item>Bottom</dds-grid-item>
</dds-grid>
```

Both props take an integer of 1 or more. An invalid value is ignored by the browser. A grid item outside a `dds-grid` ignores both.

#### A surface for an item

A grid item has no surface, padding or scrolling of its own. Put a `dds-box` inside it to give the cell a background and padding.

```html
<dds-grid grid-template-columns="repeat(3, 1fr)" gap="m">
  <dds-grid-item colspan="2">
    <dds-box padding="m" background="2" radius="container">Main</dds-box>
  </dds-grid-item>
  <dds-grid-item>
    <dds-box padding="m" background="2" radius="container">Aside</dds-box>
  </dds-grid-item>
</dds-grid>
```

#### Without a grid item

A grid places any direct child, so a grid item is only needed to span. Plain elements and other components sit in a single cell without a wrapper.

#### Accessibility

A grid item is a generic container. Set `role` and `aria-*` on the host where the content has meaning, for example `role="listitem"` on each item of a grid with `role="list"`. To change a span at a breakpoint, set `grid-column` or `grid-row` from your own CSS on the item.



## Properties

| Property  | Attribute | Description                                                    | Type     | Default |
| --------- | --------- | -------------------------------------------------------------- | -------- | ------- |
| `colspan` | `colspan` | The number of columns the item spans. An integer of 1 or more. | `number` | `1`     |
| `rowspan` | `rowspan` | The number of rows the item spans. An integer of 1 or more.    | `number` | `1`     |


## Slots

| Slot | Description                          |
| ---- | ------------------------------------ |
|      | The content placed in the grid item. |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*