# Container and grid

Source: https://iriscss.com/documentation/layout/container-and-grid/

Centered content and equal columns that wrap without media queries.

## Container

`.container` centers its content with a max width that grows at each breakpoint. `.container-fluid` always spans the full width with side padding.

| Viewport | Max width |
| --- | --- |
| Below 640px | 100% |
| 640px | 576px |
| 768px | 700px |
| 1024px | 950px |
| 1280px | 1200px |
| 1536px | 1450px |

```html
<main class="container">...</main>
<section class="container-fluid">...</section>
```

## Grid

Children of `.grid` sit side by side in equal columns at least `--i-grid-column-min-width` (10rem) wide, and wrap onto new rows when the grid gets narrow. It adapts to its container as well as the screen.

```html
<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>
```

## Full row

`.span-full` makes a child take a whole row.

```html
<div class="grid">
  <div class="span-full">Full row</div>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
```

## Column width

Set `--i-grid-column-min-width` on the grid to change when columns wrap.

```html
<div class="grid" style="--i-grid-column-min-width: 6rem">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-container-max-width` | `100%` | 100%, then 576px, 700px, 950px, 1200px and 1450px from viewports 640px, 768px, 1024px, 1280px and 1536px wide |
| `--i-container-padding-inline` | `var(--i-spacing)` |  |
| `--i-grid-column-gap` | `var(--i-spacing)` |  |
| `--i-grid-row-gap` | `var(--i-spacing)` |  |
| `--i-grid-column-min-width` | `10rem` | Narrowest column. Columns wrap onto a new row below this width. |