Style Guide grid



Responsive grid and box with padding

The responsive grid from PureCSS with fractional units and 4 breakpoints (sm, md, lg, xl). On this site are added optional .box containers to ensure spacing between contents.

Without .box 2/5 on medium width screens and bigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ex, rem repellat mollitia beatae ea impedit sed nemo maiores incidunt dolorum ducimus dignissimos sit voluptatibus.

Without .box 3/5 on medium width screens and bigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti quidem delectus sed debitis, alias omnis dolores voluptate libero totam laudantium et, quaerat odit! Quidem quos magnam velit dolores quam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ducimus veritatis eveniet ut, similique. Officia quia sed consequatur ad corrupti sapiente amet, saepe, obcaecati, deserunt at assumenda vel praesentium earum.

.box 1/3 on medium width screens and bigger.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ex, rem repellat mollitia beatae ea impedit sed nemo maiores incidunt dolorum ducimus dignissimos sit voluptatibus dicta at nihil dolorem quia.

.box 1/3 on medium width screens and bigger.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta at nihil dolorem quia.

.box 1/3 on medium width screens and bigger.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repellendus dignissimos laboriosam, tempora quia architecto ex non delectus modi harum, explicabo debitis facere ad praesentium. Sequi, fugit non id eaque.

Table grid

A basic table-like grid (on medium and bigger screens)

.table-col 1
.table-col 2
.table-col 3
.table-col 4
.table-col 1
.table-col 2 A bit longer column content
.table-col 3
.table-col 4
.table-col 1 A bit longer column content
.table-col 2
.table-col 3
.table-col 4

Flex row

Equal height and width columns (on medium and bigger screens).

Flex-item
Flex-item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias repellat, commodi velit similique rerum, ipsam reprehenderit.
Flex-item
Flex-item
<h3>Responsive grid and box with padding</h3>
<p>The responsive <a href="http://purecss.io/grids/">grid from PureCSS</a> with fractional units and 4 breakpoints (sm, md, lg, xl). On this site are added optional <code>.box</code> containers to ensure spacing between contents.</p>
<div class="pure-g">
	<div class="pure-u-1 pure-u-md-2-5 bg-light-gray">
		<h4><em>Without</em> <code>.box</code> 2/5 on medium width screens and bigger</h4>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ex, rem repellat mollitia beatae ea impedit sed nemo maiores incidunt dolorum ducimus dignissimos sit voluptatibus.
	</div>
	<div class="pure-u-1 pure-u-md-3-5 bg-light-gray">
		<h4><em>Without</em> <code>.box</code> 3/5 on medium width screens and bigger</h4>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti quidem delectus sed debitis, alias omnis dolores voluptate libero totam laudantium et, quaerat odit! Quidem quos magnam velit dolores quam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ducimus veritatis eveniet ut, similique. Officia quia sed consequatur ad corrupti sapiente amet, saepe, obcaecati, deserunt at assumenda vel praesentium earum.
	</div>
</div>
<br>
<div class="pure-g">
	<div class="pure-u-1 pure-u-md-1-3">
		<div class="box bg-light-gray">
			<h4><code>.box</code> 1/3 on medium width screens and bigger.</h4><br>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ex, rem repellat mollitia beatae ea impedit sed nemo maiores incidunt dolorum ducimus dignissimos sit voluptatibus dicta at nihil dolorem quia.
		</div>
	</div>
	<div class="pure-u-1 pure-u-md-1-3">
		<div class="box bg-light-gray">
			<h4><code>.box</code> 1/3 on medium width screens and bigger.</h4><br>	
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta at nihil dolorem quia.
		</div>
	</div>
	<div class="pure-u-1 pure-u-md-1-3">
		<div class="box bg-light-gray"><h4><code>.box</code> 1/3 on medium width screens and bigger.</h4><br>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repellendus dignissimos laboriosam, tempora quia architecto ex non delectus modi harum, explicabo debitis facere ad praesentium. Sequi, fugit non id eaque.
		</div>
	</div>
</div>
<br>
<h3>Table grid</h3>
<p>A basic table-like grid (on medium and bigger screens)</p>
<div class="table-grid">
	<div class="table-row">
		<div class="table-col outline-subdued">.table-col 1</div>
		<div class="table-col outline-subdued">.table-col 2</div>
		<div class="table-col outline-subdued">.table-col 3</div>
		<div class="table-col outline-subdued">.table-col 4</div>
	</div>
	<div class="table-row">
		<div class="table-col outline-subdued">.table-col 1</div>
		<div class="table-col outline-subdued">.table-col 2 A bit longer column content</div>
		<div class="table-col outline-subdued">.table-col 3</div>
		<div class="table-col outline-subdued">.table-col 4</div>
	</div>
	<div class="table-row">
		<div class="table-col outline-subdued">.table-col 1 A bit longer column content</div>
		<div class="table-col outline-subdued">.table-col 2</div>
		<div class="table-col outline-subdued">.table-col 3</div>
		<div class="table-col outline-subdued">.table-col 4</div>
	</div>
</div>
<h3>Flex row</h3>
<p>Equal height and width columns (on medium and bigger screens).</p>
<div class="flex-row">
	<div class="flex-item pad-bottom-2 outline-subdued">
		Flex-item
	</div>
	<div class="flex-item pad-bottom-2 outline-subdued">
		Flex-item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias repellat, commodi velit similique rerum, ipsam reprehenderit.
	</div>
	<div class="flex-item pad-bottom-2 outline-subdued">
		Flex-item
	</div>
	<div class="flex-item pad-bottom-2 outline-subdued">
		Flex-item	
	</div>
</div>