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 setpadding-rightandpadding-lefton each column, and use negativemarginto 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-4:
<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:
<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:
<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.
<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. In the following example, we use responsive row columns and responsive gutter props.
<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 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).
<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-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-pro'CRow
import { CRow } from '@coreui/react-pro'CCol
import { CCol } from '@coreui/react-pro'