# grid

[component-header:sl-grid]

Grid is a layout system, with columns, making it easier to layout and align content.

```html preview
<sl-grid sl-cols="2" sl-gap="2">
  <sl-button sl-col-span="2">1</sl-button>
  <sl-button>2</sl-button>
  <sl-button sl-col-span="2" sl-col-start="1" sl-col-end="3">3</sl-button>
  <sl-button sl-col-start="2" sl-col-end="3">4</sl-button>
</sl-grid>
```

## Examples

### Columns
Number of columns in the grid and allows up to 12 columns across the page.
```html preview
<sl-grid sl-cols="3" sl-cols-lg="4" sl-cols-md="2" sl-cols-sm="1" sl-gap="2">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
</sl-grid>
```

### Gap
```html preview
<sl-grid sl-cols="2" sl-gap="2" sl-gap-x="5" sl-gap-y="3">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
</sl-grid>
```

### Column Start and End & Column Span
```html preview
<sl-grid sl-cols="5" sl-gap="2">
  <sl-button sl-col-start="1" sl-col-end="6">1</sl-button>
  <sl-button sl-col-start="2" sl-col-end="5">2</sl-button>
  <sl-button sl-col-start="1" sl-col-end="2">3</sl-button>
  <sl-button sl-col-start="5" sl-col-end="6">4</sl-button>
  <sl-button sl-col-start="1" sl-col-end="2">5</sl-button>
  <sl-button sl-col-start="5" sl-col-end="6">6</sl-button>
  <sl-button sl-col-span="5">6</sl-button>
</sl-grid>
```

### Justify Content and Align Content / Items
Justification and alignment is specified in the [Box Alignment Page](../grid/box-alignment.md)

### Justify Items
```html preview
<sl-grid sl-cols="5" sl-gap="2" justify-items-center>
  <sl-button sl-col-start="1" sl-col-end="6">1</sl-button>
  <sl-button sl-col-start="2" sl-col-end="5">2</sl-button>
  <sl-button sl-col-start="1" sl-col-end="2">3</sl-button>
  <sl-button sl-col-start="5" sl-col-end="6">4</sl-button>
  <sl-button sl-col-start="1" sl-col-end="2">5</sl-button>
  <sl-button sl-col-start="5" sl-col-end="6">6</sl-button>
  <sl-button sl-col-span="5">6</sl-button>
</sl-grid>
```

## Properties

### Container
| Name | Description |
|------|-------------|
| sl-cols | Number of columns in the grid |
| sl-cols-sm | Number of columns in the grid for screens smaller than 600px |
| sl-cols-md | Number of columns in the grid for screens larger than 600px |
| sl-cols-lg | Number of columns in the grid for screens larger than 1025px |
| sl-gap  | Size of gap between elements  |
| justify-items-[Value]  |  Aligns grid items within their columns (not the entire container).(Values: start, end, center, stretch.)[For more information on Justify Items, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) |

### Nested(Items)
| Name | Description |
|------|-------------|
| sl-col-span | The number of columns the child is to span |
| sl-col-start  | The start position in the grid of the child  |
| sl-col-end  | The end position in the grid of the child  |
| justify-self-[Value]  |  The justify-self property overrides justify-items on individual items.(Values: auto, start, end, center, stretch.)[For more information on Justify Items, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) |

## Gap

[For more information on gap, visit here.](../grid/gap.md)

[component-metadata:sl-grid]