21.2 #Row-grid.Columns-sizes Row — Grid System

Toggle example guides Toggle HTML markup

Columns sizes

.sf-row__col.-col-{1, 2, 3,..., 12}

Column sizes applies for all devices unless overridden

.sf-row__col.-col-12
.sf-row__col.-col-1
.sf-row__col.-col-11
.sf-row__col.-col-2
.sf-row__col.-col-10
.sf-row__col.-col-3
.sf-row__col.-col-9
.sf-row__col.-col-4
.sf-row__col.-col-8
.sf-row__col.-col-5
.sf-row__col.-col-7
.sf-row__col.-col-6
.sf-row__col.-col-6
.sf-row__col.-col-7
.sf-row__col.-col-5
.sf-row__col.-col-8
.sf-row__col.-col-4
.sf-row__col.-col-9
.sf-row__col.-col-3
.sf-row__col.-col-10
.sf-row__col.-col-2
.sf-row__col.-col-11
.sf-row__col.-col-1
Html
    <div class="sf-row">
       <div class="sf-row__col -col-12">
           .sf-row__col.-col-12
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-1">
           .sf-row__col.-col-1
       </div>
       <div class="sf-row__col -col-11">
           .sf-row__col.-col-11
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-2">
           .sf-row__col.-col-2
       </div>
       <div class="sf-row__col -col-10">
           .sf-row__col.-col-10
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-3">
           .sf-row__col.-col-3
       </div>
       <div class="sf-row__col -col-9">
           .sf-row__col.-col-9
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           .sf-row__col.-col-4
       </div>
       <div class="sf-row__col -col-8">
           .sf-row__col.-col-8
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-5">
           .sf-row__col.-col-5
       </div>
       <div class="sf-row__col -col-7">
           .sf-row__col.-col-7
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-7">
           .sf-row__col.-col-7
       </div>
       <div class="sf-row__col -col-5">
           .sf-row__col.-col-5
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-8">
           .sf-row__col.-col-8
       </div>
       <div class="sf-row__col -col-4">
           .sf-row__col.-col-4
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-9">
           .sf-row__col.-col-9
       </div>
       <div class="sf-row__col -col-3">
           .sf-row__col.-col-3
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-10">
           .sf-row__col.-col-10
       </div>
       <div class="sf-row__col -col-2">
           .sf-row__col.-col-2
       </div>
    </div>
    <div class="sf-row">
       <div class="sf-row__col -col-11">
           .sf-row__col.-col-11
       </div>
       <div class="sf-row__col -col-1">
           .sf-row__col.-col-1
       </div>
    </div>