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 horizontalpadding. We setpadding-right andpadding-left on each column, and use negativemargin to offset that at the start and end of each row to align content.

• Gutters start at1.5rem (24px) wide. This allows us to match our grid to thepadding 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-4:

<CContainerclassName="px-4">
<CRowxs={{gutterX:5}}>
<CCol>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CCol>
<divclassName="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:

<CContainerclassName="overflow-hidden">
<CRowxs={{gutterX:5}}>
<CCol>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CCol>
<divclassName="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:

<CContainerclassName="overflow-hidden">
<CRowxs={{gutterY:5}}>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="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.

<CContainer>
<CRowxs={{gutter:2}}>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
<CColxs={{span:6}}>
<divclassName="p-3">Custom column padding</div>
</CCol>
</CRow>
</CContainer>

Row columns gutters#

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

<CContainer>
<CRowxs={{cols:2,gutter:2}}lg={{cols:5,gutter:3}}>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="p-3">Row column</div>
</CCol>
<CCol>
<divclassName="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 negativemargins from<CRow> and the horizontalpadding 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).

<CRowxs={{gutter:0}}>
<CColsm={6}md={8}>.col-sm-6 .col-md-8</CCol>
<CColxs={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-width:1.5rem;
$gutters:(
0:0,
1:$spacer*.25,
2:$spacer*.5,
3:$spacer,
4:$spacer*1.5,
5:$spacer*3,
);

API#

CContainer#

import{CContainer}from'@coreui/react'
// or
importCContainerfrom'@coreui/react/src/components/grid/CContainer'

CRow#

import{CRow}from'@coreui/react'
// or
importCRowfrom'@coreui/react/src/components/grid/CRow'

CCol#

import{CCol}from'@coreui/react'
// or
importCColfrom'@coreui/react/src/components/grid/CCol'