Αρχική

Columns

Λεπτομέρειες: Κατηγορία: Features; Δημοσιεύθηκε : Σάββατο, 05 Απριλίου 2014 08:16

This page includes example of columns that you can use in the content when you write your Blog or a Page, the instructions is simple place the html code that is below and add content.

You can combine different width classes to suit your needs, the available width classes are: gantry-width-10, gantry-width-20, gantry-width-30, gantry-width-33, gantry-width-40, gantry-width-50, gantry-width-60, gantry-width-66, gantry-width-70, gantry-width-80, gantry-width-90, gantry-width-100

Columns 100%

Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa. Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.

<div class="row">
   <div class="gantry-width-100 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="clear"></div>
</div>

Columns 50%

Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.

<div class="row">
   <div class="gantry-width-50 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-50 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="clear"></div>
</div>

Columns 33%

Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.

<div class="row">
   <div class="gantry-width-33 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-33 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-33 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="clear"></div>
</div>

Columns 25%

Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.

<div class="row">
   <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="clear"></div>
</div>

Columns 66% 33%

Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.

Donec non sapien erat. Quisque eu est quis magna.

<div class="row">
   <div class="gantry-width-66 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna tristique fermentum ut quis massa.</p>
      </div>
   </div>
   <div class="gantry-width-33 gantry-width-block">
      <div class="gantry-width-spacer">
         <p>Donec non sapien erat. Quisque eu est quis magna.</p>
      </div>
   </div>
   <div class="clear"></div>
</div>