One column

.gs-wrp .gs-box
    <div class="gs-wrp">
      <div class="gs-box">.gs-wrp .gs-box</div>
    </div><!-- .gs-wrp -->
      

Two columns

Default

.gs-wrp-2 .gs-1-fl-50 .gs-box
.gs-wrp-2 .gs-2-oh .gs-box
    <div class="gs-wrp-2">
      <div class="gs-1-fl-50">
        <div class="gs-box">.gs-wrp-2 .gs-1-fl-50 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-2 .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-2 -->
          

Reversed

.gs-wrp-2 .gs-1-fr-50 .gs-box
.gs-wrp-2 .gs-2-oh .gs-box
    <div class="gs-wrp-2">
      <div class="gs-1-fr-50">
        <div class="gs-box">.gs-wrp-2 .gs-1-fr-50 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-2 .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-2 -->
          

With borders

.gs-wrp-2-bdr .gs-1-fl-50 .gs-box
.gs-wrp-2-bdr .gs-2-oh .gs-box
    <div class="gs-wrp-2-bdr">
      <div class="gs-1-fl-50">
        <div class="gs-box">.gs-wrp-2-bdr .gs-1-fl-50 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-2-bdr .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-2 -->
          

Three columns

Default

.gs-wrp-3 .gs-1-fl-33 .gs-box
.gs-wrp-3 .gs-2-fl-33 .gs-box
.gs-wrp-3 .gs-3-oh .gs-box
    <div class="gs-wrp-3">
      <div class="gs-1-fl-33">
        <div class="gs-box">.gs-wrp-3 .gs-1-fl-33 .gs-box</div>
      </div>
      <div class="gs-2-fl-33">
        <div class="gs-box">.gs-wrp-3 .gs-2-fl-33 .gs-box</div>
      </div>
      <div class="gs-3-oh">
        <div class="gs-box">.gs-wrp-3 .gs-3-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-3 -->
          

Reversed

.gs-wrp-3 .gs-1-fr-33 .gs-box
.gs-wrp-3 .gs-2-fr-33 .gs-box
.gs-wrp-3 .gs-3-oh .gs-box
    <div class="gs-wrp-3">
      <div class="gs-1-fr-33">
        <div class="gs-box">.gs-wrp-3 .gs-1-fr-33 .gs-box</div>
      </div>
      <div class="gs-2-fr-33">
        <div class="gs-box">.gs-wrp-3 .gs-2-fr-33 .gs-box</div>
      </div>
      <div class="gs-3-oh">
        <div class="gs-box">.gs-wrp-3 .gs-3-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-3 -->
          

With borders

.gs-wrp-3-bdr .gs-1-fl-33 .gs-box
.gs-wrp-3-bdr .gs-2-fl-33 .gs-box
.gs-wrp-3-bdr .gs-3-oh .gs-box
    <div class="gs-wrp-3-bdr">
      <div class="gs-1-fl-33">
        <div class="gs-box">.gs-wrp-3-bdr .gs-1-fl-33 .gs-box</div>
      </div>
      <div class="gs-1-fl-33">
        <div class="gs-box">.gs-wrp-3-bdr .gs-1-fl-33 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-3-bdr .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-3 -->
          

Four columns

Default

.gs-wrp-4 .gs-1-fl-25 .gs-box
.gs-wrp-4 .gs-2-fl-25 .gs-box
.gs-wrp-4 .gs-3-fl-25 .gs-box
.gs-wrp-4 .gs-4-oh .gs-box
    <div class="gs-wrp-4">
      <div class="gs-1-fl-25">
        <div class="gs-box">.gs-wrp-4 .gs-1-fl-25 .gs-box</div>
      </div>
      <div class="gs-2-fl-25">
        <div class="gs-box">.gs-wrp-4 .gs-2-fl-25 .gs-box</div>
      </div>
      <div class="gs-3-fl-25">
        <div class="gs-box">.gs-wrp-4 .gs-3-fl-25 .gs-box</div>
      </div>
      <div class="gs-4-oh">
        <div class="gs-box">.gs-wrp-4 .gs-4-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-4 -->
          

Reversed

.gs-wrp-4 .gs-1-fr-25 .gs-box
.gs-wrp-4 .gs-2-fr-25 .gs-box
.gs-wrp-4 .gs-3-fr-25 .gs-box
.gs-wrp-4 .gs-4-oh .gs-box
    <div class="gs-wrp-4">
      <div class="gs-1-fr-25">
        <div class="gs-box">.gs-wrp-4 .gs-1-fr-25 .gs-box</div>
      </div>
      <div class="gs-2-fr-25">
        <div class="gs-box">.gs-wrp-4 .gs-2-fr-25 .gs-box</div>
      </div>
      <div class="gs-3-fr-25">
        <div class="gs-box">.gs-wrp-4 .gs-3-fr-25 .gs-box</div>
      </div>
      <div class="gs-4-oh">
        <div class="gs-box">.gs-wrp-4 .gs-4-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-4 -->
          

With borders

.gs-wrp-4-bdr .gs-1-fl-25 .gs-box
.gs-wrp-4-bdr .gs-2-fl-25 .gs-box
.gs-wrp-4-bdr .gs-3-fl-25 .gs-box
.gs-wrp-4-bdr .gs-4-oh .gs-box
    <div class="gs-wrp-4-bdr">
      <div class="gs-1-fl-25">
        <div class="gs-box">.gs-wrp-4-bdr .gs-1-fl-25 .gs-box</div>
      </div>
      <div class="gs-2-fl-25">
        <div class="gs-box">.gs-wrp-4-bdr .gs-2-fl-25 .gs-box</div>
      </div>
      <div class="gs-3-fl-25">
        <div class="gs-box">.gs-wrp-4-bdr .gs-3-fl-25 .gs-box</div>
      </div>
      <div class="gs-4-oh">
        <div class="gs-box">.gs-wrp-4-bdr .gs-4-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-4 -->
          

Other columns

66/33

.gs-wrp-2 .gs-1-fl-66 .gs-box
.gs-wrp-2 .gs-2-oh .gs-box
    <div class="gs-wrp-2">
      <div class="gs-1-fl-66">
        <div class="gs-box">.gs-wrp-2 .gs-1-fl-66 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-2 .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-2 -->
          

75/25

.gs-wrp-2 .gs-1-fl-75 .gs-box
.gs-wrp-2 .gs-2-oh .gs-box
    <div class="gs-wrp-2">
      <div class="gs-1-fl-75">
        <div class="gs-box">.gs-wrp-2 .gs-1-fl-75 .gs-box</div>
      </div>
      <div class="gs-2-oh">
        <div class="gs-box">.gs-wrp-2 .gs-2-oh .gs-box</div>
      </div>
    </div><!-- .gs-wrp-2 -->