Q-STEVO

Flex Lightweight CSS Grid System

Download v2.0.0

Flexible number of columns

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
      
        <!-- Main grid's container -->
        <div class="container">
          <!-- Grid's columns -->
          <div class="col">Your content here...</div>
          <div class="col">Your content here...</div>
          <div class="col">Your content here...</div>
        </div>
      
    

Responsive columns widths

.col-md-12
.col-md-6
.col-md-6
.col-sm-6 .col-md-4
.col-sm-6 .col-md-8
.col-xs-4
.col-xs-4
.col-xs-4
col-sm-5c
col-sm-5c
col-sm-5c
col-sm-5c
col-sm-5c
      
        <!-- Main grid's container -->
        <div class="container">
          <!-- Grid's columns (sm, md, lg) -->
          <div class="col-md-4">Your content here...</div>
          <div class="col-md-4">Your content here...</div>
          <div class="col-md-4">Your content here...</div>
        </div>
      
    

Columns offset

md-1
.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
.col-md-7
.col-md-8
.col-md-9
.col-md-10
.col-md-11
.col-md-12 (no offset)
      
        <!-- Main grid's container -->
        <div class="container">
          <!-- Grid's columns with an offset of 2 columns -->
          <div class="col-md-9 col-md-offset-3">Your content here...</div>
        </div>
      
    

Centering Columns Horizontally

.col-md-4
.col-md-4
      
        <!-- Main grid's container: note the use of 'center-h' -->
        <div class="container center-h">
          <!-- Grid's columns -->
          <div class="col-md-4">Your content here...</div>
          <div class="col-md-4">Your content here...</div>
        </div>
      
    

Nesting Columns and Centering

Add the class .group to the parent column

Use the class .no-pad to remove the padding from the parent column

.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-6
.col-md-6

Note how the element is horizontally and vertically centered

      
        <!-- Main grid's container -->
        <div class="container">
          <!--
            Note the class 'group' for nesting others columns and
            'no-pad' for remove the padding from this column
          -->
          <div class="col-md-6 group no-pad">
            <div class="col-md-12 text-center">
              <p>Add the class <b>.group</b> to the parent column</p>
              <p>Use the class <b>.no-pad</b> to remove the padding from the parent column</p>
            </div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
            <div class="col-md-6"><div class="box">.col-md-6</div></div>
          </div>
          <!-- Note the class 'center-h-v' for center the element on it's parent -->
          <div class="col-md-6 group no-pad center-h-v">
            <div class="col-md-6">
              <div class="box" style="margin-bottom: 0;">
                .col-md-6
                <p>Note how the element is horizontally and vertically centered</p>
              </div>
            </div>
          </div>
        </div>
      
    

Pull & Push are dead - Welcome Flex Order

I'll be the second on small devices
I'll be the last on small devices
I'll be the first on small devices
      
        <!-- Main grid's container -->
        <div class="container my-container">
          <!-- Grid's columns -->
          <div class="col-md-4 reorder">
            <div class="box">
              I'll be the second on small devices
            </div>
          </div>
          <div class="col-md-4 reorder">
            <div class="box">
              I'll be the last on small devices
            </div>
          </div>
          <div class="col-md-4 reorder">
            <div class="box">
              I'll be the first on small devices
            </div>
          </div>
        </div>
      
    
      
        @media all and (max-width: 768px) {
          /* reordening */
          .my-container{
            .reorder{
              &:nth-child(1){ order:1; }
              &:nth-child(2){ order:2; }
              &:nth-child(3){ order:0; }
            }
          }
        }