# Grid Template Columns

```html display
<sl-alert type="warning" open>
  <strong>Deprecated</strong><br/>Grid style classes is deprecated. Use sl-grid component instead.</sl-alert>
```

Utilities for specifying the columns in a grid layout.

<div class="scroll-table-prefix"></div>

| Class          | Properties                                         |
| -------------- | -------------------------------------------------- |
| grid-cols-1    | grid-template-columns: repeat(1, minmax(0, 1fr));  |
| grid-cols-2    | grid-template-columns: repeat(2, minmax(0, 1fr));  |
| grid-cols-3    | grid-template-columns: repeat(3, minmax(0, 1fr));  |
| grid-cols-4    | grid-template-columns: repeat(4, minmax(0, 1fr));  |
| grid-cols-5    | grid-template-columns: repeat(5, minmax(0, 1fr));  |
| grid-cols-6    | grid-template-columns: repeat(6, minmax(0, 1fr));  |
| grid-cols-7    | grid-template-columns: repeat(7, minmax(0, 1fr));  |
| grid-cols-8    | grid-template-columns: repeat(8, minmax(0, 1fr));  |
| grid-cols-9    | grid-template-columns: repeat(9, minmax(0, 1fr));  |
| grid-cols-10   | grid-template-columns: repeat(10, minmax(0, 1fr)); |
| grid-cols-11   | grid-template-columns: repeat(11, minmax(0, 1fr)); |
| grid-cols-12   | grid-template-columns: repeat(12, minmax(0, 1fr)); |
| grid-cols-none | grid-template-columns: none;                       |

## Usage

Use the `grid-cols-{n}` utilities to create grids with _n_ equally sized columns.

```html preview
<div class="grid grid-cols-3 gap-4">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
  <sl-button>5</sl-button>
  <sl-button>6</sl-button>
  <sl-button>7</sl-button>
  <sl-button>8</sl-button>
  <sl-button>9</sl-button>
</div>
```