Columns
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Options
While Gameforest uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
| Extra small | Small | Medium | Large | Extra large | |
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Example
Gameforest’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
Cras consequat porttitor tincidunt. Praesent eu tincidunt lacus. Donec ut neque vitae erat congue venenatis. Duis hendrerit lacinia leo in dignissim. Aliquam erat volutpat. Sed dignissim hendrerit nibh, quis faucibus erat cursus eget. Integer porta nisl vitae felis rutrum ut mollis felis congue. Vestibulum augue nisl, egestas eu rhoncus eu, fermentum in leo. Pellentesque ultricies pharetra nulla sit amet sagittis. Curabitur at feugiat nibh. Duis sit amet odio eros. Donec non purus non augue cursus convallis sed id purus.
Integer vulputate tempus luctus. Etiam nisi sem, pretium eget libero eget, interdum aliquam metus. Curabitur scelerisque nisi eu ultricies pretium. Donec at augue porta, hendrerit eros a, vehicula lacus. Suspendisse tempor ex ipsum, eu mattis lorem suscipit sed. Donec commodo non est et tincidunt.
Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam.
Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam, nec venenatis dolor dolor at massa. Aliquam aliquet quam augue feugiat in lore ipsum dolor sit amet convallis magna suscipit.
Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam, nec venenatis dolor dolor at massa. Aliquam aliquet quam augue feugiat in lore ipsum dolor sit amet convallis magna suscipit.
Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.
Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.
Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.
Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.
Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.
Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.
Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.
<div class="row">
<div class="col-lg-12">
<p>Cras consequat porttitor tincidunt. Praesent eu tincidunt lacus. Donec ut neque vitae erat congue venenatis. Duis hendrerit lacinia leo in dignissim. Aliquam erat volutpat. Sed dignissim hendrerit nibh, quis faucibus erat cursus eget. Integer porta nisl vitae felis rutrum ut mollis felis congue. Vestibulum augue nisl, egestas eu rhoncus eu, fermentum in leo. Pellentesque ultricies pharetra nulla sit amet sagittis. Curabitur at feugiat nibh. Duis sit amet odio eros. Donec non purus non augue cursus convallis sed id purus.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-8">
<p>Integer vulputate tempus luctus. Etiam nisi sem, pretium eget libero eget, interdum aliquam metus. Curabitur scelerisque nisi eu ultricies pretium. Donec at augue porta, hendrerit eros a, vehicula lacus. Suspendisse tempor ex ipsum, eu mattis lorem suscipit sed. Donec commodo non est et tincidunt.</p>
</div>
<div class="col-lg-4">
<p>Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam, nec venenatis dolor dolor at massa.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<p>Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam, nec venenatis dolor dolor at massa. Aliquam aliquet quam augue feugiat in lore ipsum dolor sit amet convallis magna suscipit.</p>
</div>
<div class="col-lg-6">
<p>Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium feugiat, nibh metus ultricies quam, nec venenatis dolor dolor at massa. Aliquam aliquet quam augue feugiat in lore ipsum dolor sit amet convallis magna suscipit.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
<p>Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.</p>
</div>
<div class="col-lg-4">
<p>Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.</p>
</div>
<div class="col-lg-4">
<p>Maecenas aliquam massa ut mi efficitur convallis. Morbi cursus eros eget enim imperdiet pharetra. Etiam ac interdum quam. Duis faucibus magna quis.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-3">
<p>Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.</p>
</div>
<div class="col-lg-3">
<p>Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.</p>
</div>
<div class="col-lg-3">
<p>Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.</p>
</div>
<div class="col-lg-3">
<p>Duis feugiat neque et ante euismod, eu condimentum metus gravida.Phasellus molestie quis sem ut commodo.</p>
</div>
</div>