Grid layout

Koval provides support for a responsive grid layout through its Grid, Row, and Column components.

Grid example

import {Grid, Row, Col} from 'koval-ui';
 
return (
    <Grid>
        <Row>
            <Col xs={12}>This is Grid example</Col>
        </Row>
    </Grid>
);

Demo

Configuration

The grid layout is designed to be fully responsive, ensuring that your content looks great on all devices, from mobile phones to large desktop screens.

Grid

Grid component serves as a wrapper. The grid width can be specified as a number or as fluid string, which sets the width to 100%. Developers can define the number of columns using the base prop, with recommended values being 12, 16, or 24. The gap prop allows control over the width between columns.

Row

Row component creates horizontal section for rendering the line of content.

Col

Col component creates grid column. Developers can configure width and shift of the column. By using predefined breakpoints and t-shirt sizes (xs, sm, md, lg, xl), the grid layout ensures a consistent look and feel across different screen sizes. Each of them is available as a prop which accepts number of columns or fluid, which indicates that column takes all available width.

<Row>
    <Col xs={6} md={10}>
        6 columns at small screens and 10 columns at medium and bigger screens
    </Col>
    <Col xs="fluid">Takes the rest of available width.</Col>
</Row>

Fluid column Demo

It's also possible to shift column towards right side, using same breakpoints via shiftXX prop.

<Row>
    <Col xs={8} shiftXS={2}>
        8 columns width, offset 2 columns
    </Col>
</Row>

Column offset Demo

Breakpoint values

Breakpoints are applied from smallest to biggest, so the biggest one has the preference.