23GDP

Full-width
Two columns
Three columns
Four columns
Multi columns 1
Multi columns 2

This is a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat velit ac augue volutpat vitae suscipit lacus viverra. adipiscing fringilla sem, sit amet gravida felis fringilla non. Cras vitae aliquet nisl. Nulla facilisi. Praesent facilisis et sagittis nibh eleifend sit amet. Nam ultrices aliquet quam, sed sollicitudin mi iaculis ac. Mauris id sapien nec liberodapibus gravida. Vivamus auctor metus sit amet magna feugiat Integer blandit velit quis leo bibendum vel venenatis eros ultrices. Maecenas adipiscing elementum sem aliquet congue. Proin volutpat augue et accumsan. Sed blandit nisl at enim suscipit interdum. Vivamus at elit massa. Quisque sit amet mauris orci, sit tincidunt elit. Proin dolor arcu, euismod quis interdum nec, eleifend et massa.

Donec sem nibh, egestas quis eleifend sit amet, aliquam eu mi. Sed pretium commodo sapien at porta. Nam scelerisque, odio eu convallis, mauris mi semper risus, et dictum tellus justo ut ante. Curabitur eleifend convallis sollicitudin. Etiam ut arcu at interdum molestie sed quis est. Sed sodales gravida libero, quis consequat velit varius at. Mauris quis nisl in ligula pharetra ac leo. Nullam eget diam eu urna pharetra pellentesque ac pellentesque justo. Fusce porttitor gravida porttitor. Integer facilisis quam, in mattis urna pellentesque eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a libero aliquam aliquam id vel sapien. Vivamus vitae lectus a lacus blandit

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Vivamus metus massa, tincidunt non amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Etiam ut turpis vel facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed semper sed, mattis eget mi. Nulla facilisi. Integer mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.Ut tempor ultrices quam, ac pretium velit lacinia eu. In habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, metus velit interdum diam, vitae pharetra leo orci non dolor.

Code
How it works

<div class="wrapper">
  <div class="grid_24">
    < -- insert content here -- >
  </div>
</div>

The template is based on a grid system that uses 12 columns. In order to create the full-witdh column you will need to insert the following code:

<div class="wrapper">
  <div class="grid_24">
    <-- insert content here -->
  </div>
</div>

Lets examine the layout creation process, step by step:

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.
As an example, let's create a single column structure:
```
<div class="wrapper">
  <div class="grid_26">
    <-- insert content here -->
  </div>
</div>
```
As you see, total index is 26.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Vivamus metus massa, tincidunt amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Etiam ut facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed semper sed, mattis eget mi. Nulla facilisi. mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis. Ut tempor ultrices quam, ac lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed odio. Nam sollicitudin, metus non imperdiet interdum, metus velit interdum diam, vitae pharetra leo orci non dolor.

This is a second heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit ut convallis nisi. Etiam ut turpis vel nisl facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed facilisi.

top

Code
How it works

<div class="wrapper">
  <div class="grid_12">
    <-- insert content here -->
  </div>
  <div class="grid_12">
    <-- insert content here -->
  </div>
</div>

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.
As an example, let's create a two column structure:
```
<div class="wrapper">
  <div class="grid_12">
    <-- insert content here -->
  </div>
  <div class="grid_12">
    <-- insert content here -->
  </div>
</div>
```
As you see, total index is 12 + 12 = 24.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

This is a heading

Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet ut convallis nisi. vel pellentesque ante ornare.

Ut tempor ultrices quam, ac pretium velit lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra Nam, metus non.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

top

Code
How it works

<div class="wrapper">
   <div class="grid_8">
     <-- insert content here -->
   </div>
   <div class="grid_8">
     <-- insert content here -->
   </div>
   <div class="grid_8">
     <-- insert content here -->
   </div>
</div>

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.
As an example, let's create a three column structure:
```
<div class="wrapper">
   <div class="grid_8">
     <-- insert content here -->
   </div>
   <div class="grid_8">
     <-- insert content here -->
   </div>
   <div class="grid_8">
     <-- insert content here -->
   </div>
</div>
```
As you see, total index is 8 + 8 + 8 = 24.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget egestas interdum. Maecenas quis egestas mi. Praesent.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt Quisque sodales massa at nunc egestas bibendum.

Vivamus metus massa, tincidunt non viverra sit amet, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in enim. Proin sit amet nunc odio, ut convallis nisi. Integer feugiat mattis semper..

Ut tempor ultrices quam, ac pretium velit lacinia eu. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, vitae pharetra leo orci.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget egestas interdum. Maecenas quis egestas mi. Praesent.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget egestas interdum. Maecenas quis egestas mi. Praesent.

top

Code
How it works

<div class="wrapper">
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
</div>

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 12 and should not be bigger than this value.
As an example, let's create a four column structure:
```
<div class="wrapper">
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
  <div class="grid_6">
    <-- insert content here -->
  </div>
</div>
```
As you see, total index is 6 + 6 + 6 + 6 = 24.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget egestas interdum. Maecenas quis egestas mi. Praesent.

Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt Quisque sodales massa at nunc egestas bibendum.

Ut tempor ultrices quam, ac pretium velit lacinia eu. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, vitae pharetra leo orci.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum. Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. Praesent tincidunt iaculis felis pretium Aenean non elit diam. Mauris in velit ut arcu.

top

Code
How it works

<div class="wrapper">
 <div class="grid_6">
   <-- insert content here -->
 </div>
 <div class="grid_6">
   <-- insert content here -->
 </div>
 <div class="grid_12">
   <-- insert content here -->
 </div>
</div>

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.
As an example, let's create a three column structure with different column widths:
```
<div class="wrapper">
 <div class="grid_6">
   <-- insert content here -->
 </div>
 <div class="grid_6">
   <-- insert content here -->
 </div>
 <div class="grid_12">
   <-- insert content here -->
 </div>
</div>
```
As you see, total index is 6 + 6 + 12 = 24.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium.

Quisque sodales massa at nunc egestas bibendum. Et urna elementum vel ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum.

Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis. Phasellus egestas consequat feugiat. Fusce

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat . Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit blandit in ipsum.

This is a heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque pretium. Quisque sodales massa at nunc egestas bibendum. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Maecenas quis . Praesent tincidunt iaculis felis pretium convallis.

This is a heading

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Maecenas quis Praesent tincidunt iaculis felis pretium convallis.

top

Code
How it works

<div class="wrapper">
  <div class="grid_8">
    <-- insert content here -->
  </div>
  <div class="grid_16">
    <div class="wrapper">
      <div class="grid_7 alpha">
        <-- insert content here -->
      </div>
      <div class="grid_7 prefix_1 omega">
        <-- insert content here -->
      </div>
    </div>
  </div>
</div>

Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
Next you need to create the desired number of columns and add the "grid" class to them.
Now the most important step. You need to add "grid_Х" class to each of the columns, where Х - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.
As an example, let's create a two column structure where one of the columns contains another column structure:
```
<div class="wrapper">
  <div class="grid_8">
    <-- insert content here -->
  </div>
  <div class="grid_16">
    <div class="wrapper">
      <div class="grid_7 alpha">
        <-- insert content here -->
      </div>
      <div class="grid_7 prefix_1 omega">
        <-- insert content here -->
      </div>
    </div>
  </div>
</div>
```
As you see, total index is 8 + 16 = 24. The width of the inner column structure equals to the width of the second column 7 + 7 + 1 = 15.