# Gutters

> Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js grid system.

## How they work

- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.

- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers](https://coreui.io/bootstrap/docs/utilities/spacing) scale.

- **Gutters can be responsively adjusted.** Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.

## Horizontal gutters

`{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `<CContainer>` or `<CContainer fluid>` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="px-4">
  <CRow xs={{ gutterX: 5 }}>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

An alternative solution is to add a wrapper around the `<CRow>` with the `.overflow-hidden` class:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="overflow-hidden">
  <CRow xs={{ gutterX: 5 }}>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Vertical gutters

`{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `<CRow>` at the end of a page. If this occurs, you add a wrapper around `<CRow>` with the `.overflow-hidden` class:

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer className="overflow-hidden">
  <CRow xs={{ gutterY: 5 }}>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Horizontal & vertical gutters

`{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer>
  <CRow xs={{ gutter: 2 }}>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
    <CCol xs={{ span: 6 }}>
      <div className="p-3">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>
```

## Row columns gutters

Gutter props can also be added to [row columns](../grid#row-columns). In the following example, we use responsive row columns and responsive gutter props.

```jsx preview className="docs-example m-0 border-0 docs-example-cols"
<CContainer>
  <CRow xs={{ cols:2, gutter: 2 }} lg={{ cols: 5, gutter: 3}}>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
    <CCol>
      <div className="p-3">Row column</div>
    </CCol>
  </CRow>
</CContainer>
```

## No gutters

The gutters between columns in our predefined grid props can be removed with `{breakpoint}={{ gutter: 0 }}`. This removes the negative `margin`s from `<CRow>` and the horizontal `padding` from all immediate children columns.

**Need an edge-to-edge design?** Drop the parent `<CContainer>` or `<CContainer fluid>`.

In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).

```jsx preview className="docs-example m-0 border-0 docs-example-row"
<CRow xs={{ gutter: 0 }}>
  <CCol sm={6} md={8}>.col-sm-6 .col-md-8</CCol>
  <CCol xs={6} md={4}>.col-6 .col-md-4</CCol>
</CRow>
```

## Change the gutters

Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map.

```scss
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
```

## API

### CContainer

```jsx
import { CContainer } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `fluid` | `boolean \| undefined` | - | Set container 100% wide, spanning the entire width of the viewport. |
| `lg` | `boolean \| undefined` | - | Set container 100% wide until large breakpoint. |
| `md` | `boolean \| undefined` | - | Set container 100% wide until medium breakpoint. |
| `sm` | `boolean \| undefined` | - | Set container 100% wide until small breakpoint. |
| `xl` | `boolean \| undefined` | - | Set container 100% wide until X-large breakpoint. |
| `xxl` | `boolean \| undefined` | - | Set container 100% wide until XX-large breakpoint. |

### CRow

```jsx
import { CRow } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |

### CCol

```jsx
import { CCol } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |