Grid system

The grid system contains the container class, row class and column class. Container classs center the content a defines webpage content width according to breakpoints. Row class is wrapper for columns of grid system.

By default, columns are same width - they will divide the whole row space:

        
<div class="row">
    <div class="column">
        <div class="box">I am default column!</div>
    </div>
    <div class="column">
        <div class="box">I am default column!</div>
    </div>
    <div class="column">
        <div class="box">I am default column!</div>
    </div>
    <div class="column">
        <div class="box">I am default column!</div>
    </div>
</div>
        
    

Responsive columns with size classes

For every column the size responsive classes. The form of this classes is {breakpoint}-{columns}. The class defines how many columns of all columns (by default grid has 12 columns) is column taking and from what breakpoint (breakpoints are mobile-first). Columns below should have 100% width below 1024px resolution, between 1024px and 1319px 50% width and above 1319px resolution it should have 1/3 of row width.

        
<div class="row">
    <div class="column xs-12 md-6 xl-4">
        <div class="box">I am responsive column!</div>
    </div>
    <div class="column xs-12 md-6 xl-4">
        <div class="box">I am responsive column!</div>
    </div>
    <div class="column xs-12 md-6 xl-4">
        <div class="box">I am responsive column!</div>
    </div>
</div>
        
    

Stretch and auto columns

To columns the stretch and grow classes can be added. Columns with stretch classes only take the space it needs, auto columns will fill up the remaining space (which is default behaviour of columns even without other classes). These classes are also orienting by breakpoints.

        
<div class="row">
    <div class="column xs-stretch">
        <div class="box">I am stretch column!</div>
    </div>
    <div class="column xs-grow">
        <div class="box">I am default column!</div>
    </div>
</div>
        
    

Order classes

With order classes, column can be forced to be first or last in order. These classes are also orienting by breakpoints.

        
<div class="row">
    <div class="column">
        <div class="box">I am default column!</div>
    </div>
    <div class="column lg-orderFirst">
        <div class="box">I should be first on bigscreen even thought I am last in HTML!</div>
    </div>
</div>
        
    

Other flexbox classes

Rows can also have classes setting flexbox propetiers like justify-content, flex-wrap, align-items and align-content. For each of columns can be added classes which is defining the align-self property.

    
<div class="row xs-justifyCenter xs-itemsEnd">
    <div class="column xs-3">
        <div class="box">I am column!</div>
    </div>
    <div class="column xs-3">
        <div class="box" style="height: 80px">I am column!</div>
    </div>
    <div class="column xs-3 xs-selfCenter">
        <div class="box" style="height: 80px">I am column!</div>
    </div>
</div>
    

Hide and show classes

Hide and show classes can be used when you want hide or show some elements on certain resolutions.

    
<div class="row">
    <div class="column lg-hide">
        <div class="box">I am hidden on bigscreen!</div>
    </div>
    <div class="column lg-hide">
        <div class="box">I am hidden on bigscreen!</div>
    </div>
    <div class="column lg-hide">
        <div class="box">I am hidden on bigscreen!</div>
    </div>
    <div class="column">
        <div class="box">I am always visible!</div>
    </div>
</div>
    

Variables which can be changed

        
//GRID SETTINGS
$parts: "columns", "orders", "align-self", "directions", "wraps", "justify", "items", "content", "hide";
$columns: 12;
$columnsSpace: 3rem;
//breakpoints in em (Breakpoint * font size = breakpoint in pixels)
$screen-xs: 30em;
$screen-sm: 48em;
$screen-md: 64em;
$screen-lg: 75em;
$screen-xl: 82.5em;