siimple 3.2.0 siimple.xyz
Grid
Use our responsive grid system with twelve columns.
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
xs
siimple-grid-col--xs-[1-12]
< 480px
Small
sm
siimple-grid-col--sm-[1-12]
< 600px
Medium
md
siimple-grid-col--md-[1-12]
< 768px
Large
lg
siimple-grid-col--lg-[1-12]
< 960px
Extra large
xl
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
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.