Hire UsGet CoreUI PRO all-access →

Gutters

MarkdownChatGPTClaude

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

On this page

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 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-5:

import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalExample = () => (
  <CContainer className="px-5">
    <CRow xs={{ gutterX: 6 }}>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)
import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalExample = () => (
  <CContainer className="px-5">
    <CRow xs={{ gutterX: 6 }}>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)

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

import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalOverflowHiddenExample = () => (
  <CContainer className="overflow-hidden">
    <CRow xs={{ gutterX: 6 }}>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)
import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalOverflowHiddenExample = () => (
  <CContainer className="overflow-hidden">
    <CRow xs={{ gutterX: 6 }}>
      <CCol>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol>
        <div className="p-4">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:

import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersVerticalExample = () => (
  <CContainer className="overflow-hidden">
    <CRow xs={{ gutterY: 6 }}>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)
import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersVerticalExample = () => (
  <CContainer className="overflow-hidden">
    <CRow xs={{ gutterY: 6 }}>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">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.

import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalVerticalExample = () => (
  <CContainer>
    <CRow xs={{ gutter: 3 }}>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)
import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersHorizontalVerticalExample = () => (
  <CContainer>
    <CRow xs={{ gutter: 3 }}>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
      <CCol xs={{ span: 6 }}>
        <div className="p-4">Custom column padding</div>
      </CCol>
    </CRow>
  </CContainer>
)

Row columns gutters

Gutter props can also be added to row columns. In the following example, we use responsive row columns and responsive gutter props.

import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersRowColumnsExample = () => (
  <CContainer>
    <CRow xs={{ cols: 2, gutter: 3 }} lg={{ cols: 5, gutter: 4 }}>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
    </CRow>
  </CContainer>
)
import { CCol, CContainer, CRow } from '@coreui/react'

export const GuttersRowColumnsExample = () => (
  <CContainer>
    <CRow xs={{ cols: 2, gutter: 3 }} lg={{ cols: 5, gutter: 4 }}>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">Row column</div>
      </CCol>
      <CCol>
        <div className="p-4">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 margins 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).

import { CCol, CRow } from '@coreui/react'

export const GuttersNoGuttersExample = () => (
  <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>
)
import { CCol, CRow } from '@coreui/react'

export const GuttersNoGuttersExample = () => (
  <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.

$grid-gutter-x: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .375,
  3: $spacer * .5,
  4: $spacer * .75,
  5: $spacer,
  6: $spacer * 1.25,
  7: $spacer * 1.5,
  8: $spacer * 1.75,
  9: $spacer * 2,
  10: $spacer * 2.25,
  11: $spacer * 2.5,
  12: $spacer * 3,
);

API

CContainer

jsx
import { CContainer } from '@coreui/react-pro'
PropertyDefaultType
2xl6.0.0+-boolean

Set container 100% wide until 2X-large breakpoint. Renamed from xxl.

className-string

A string of all className you want applied to the base component.

fluid-boolean

Set container 100% wide, spanning the entire width of the viewport.

lg-boolean

Set container 100% wide until large breakpoint.

md-boolean

Set container 100% wide until medium breakpoint.

sm-boolean

Set container 100% wide until small breakpoint.

xl-boolean

Set container 100% wide until X-large breakpoint.

CRow

jsx
import { CRow } from '@coreui/react-pro'
PropertyDefaultType
2xl6.0.0+-{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}

The number of columns/offset/order on 2X-Large devices (≥1536px). Renamed from xxl.

className-string

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 (<1280px).

md-{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}

The number of columns/offset/order on medium devices (<1024px).

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 (<1536px).

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).

CCol

jsx
import { CCol } from '@coreui/react-pro'
PropertyDefaultType
2xl6.0.0+-{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}

The number of columns/offset/order on 2X-Large devices (≥1536px). Renamed from xxl.

className-string

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 (<1280px).

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 (<1024px).

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 (<1536px).

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).