Responsive grid | siimple css

Responsive grid

Handle different grid columns sizes for each breakpoint

You can customize the grid behavior across different devices and screen sizes. The following column classes are available:

In version v3.1.0 we introduced a new grid breakpoint, the extra small size, and update the width of the small breakpoint to 600px.

In version v3.1.0 we fixed the responsive grid sizes format: the wrong format for older versions siimple-grid-col-{breakpoint}--{size} should be replaced with the correct modifier syntax siimple-grid-col--{breakpoint}-{size}. Both formats are supported in versions v3.x.x, but the wrong format will be removed in a future major release.

Size

Prefix

Class

Container size

Extra small

siimple-grid-col--xs-[1-12]

< 480px

Small

siimple-grid-col--sm-[1-12]

< 600px

Medium

siimple-grid-col--md-[1-12]

< 768px

Large

siimple-grid-col--lg-[1-12]

< 960px

Extra large

siimple-grid-col--xl-[1-12]

< 1280px

Default

siimple-grid-col--[1-12]

All sizes

You can combine different column classes to specify how the grid will be displayed on different devices. For example, if you create a grid with two columns and add the class siimple-grid-col--6 and siimple-grid-col--sm-12, your grid will have two columns on screens with sizes greater than 600px, and one column on mobile devices.

col–6 col–sm-12

<div class="siimple-grid">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--6 siimple-grid-col--sm-12">
            col--6 col--sm-12
        </div>
        <div class="siimple-grid-col siimple-grid-col--6 siimple-grid-col--sm-12">
            col--6 col--sm-12
        </div>
    </div>
</div>

Hiding columns

Added in v3.1.0

You can hide a column at a specific breakpoint adding the class siimple-grid-col--{breakpoint}-hide.

col–4 col–sm-hide

col–8 col–sm-12

<div class="siimple-grid">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-hide">
            col--4 col--sm-hide
        </div>
        <div class="siimple-grid-col siimple-grid-col--8 siimple-grid-col--sm-12">
            col--8 col--sm-12
        </div>
    </div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.