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.
.box 2/5 on medium width screens and bigger.box 3/5 on medium width screens and bigger.box 1/3 on medium width screens and bigger..box 1/3 on medium width screens and bigger..box 1/3 on medium width screens and bigger.A basic table-like grid (on medium and bigger screens)
Equal height and width columns (on medium and bigger screens).
Proper CSS native grid.
<div class="container narrow no-padding">
<div class="box">
<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>
<h3>CSS Grid</h3>
<p>Proper CSS native grid.</p>
<div class="grid grid-md-2-cols grid-lg-3-cols">
<div class=" outline-subdued">
Grid cell
</div>
<div class=" outline-subdued">
Grid cell Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias repellat, commodi velit similique rerum, ipsam reprehenderit.
</div>
<div class=" outline-subdued">
Grid cell
</div>
</div>
</div>
</div>