Pure CSS Grids

Pure CSS grids have a mobile-first responsive grid system that can be used to create responsive web page layouts.

Pure grids provide two types of classes, namely the grid class and the unit class.

The grid class is represented by pure-g while the unit class is represented by pure-u-*.

Followings are the important concept regarding grid and unit classes:

The widths of the units are fractions- The widths of the units will be always in the fraction.For example pure-u-1-2 represents 1/2 or 50% width,pure-u-4-5 represents 80% width and so on.
All the contents are the part of grid unit class.
All the child elements of the grid class must use pure-u or pure-u-* class names.

Grid Unit Sizes

The pure grid uses 5th and 24th units sizes. These unit sizes cover almost every grid. For example, to create a cell of 50% width, you can use a CSS style pure-ui-1-2.

5ths-Based Units

General Syntax

      <div class="pure-g">
  <div class="pure-u-2-5">...Inner Elements...</div>
  <div class="pure-u-3-5">...Inner Elements...</div>
</div>

Try it now

Source Code

          
            <div class="grid-unit pure-g">
  <div class="grid-unit-width pure-u">1-5</div>
  <div class="grid-unit-details pure-u-1">
    <div class="pure-g">
      <div class="grid-unit-bar pure-u-1-5"></div>
    </div>
  </div>
</div>
<div class="grid-unit pure-g">
  <div class="grid-unit-width pure-u">2-5</div>
  <div class="grid-unit-details pure-u-1">
    <div class="pure-g">
      <div class="grid-unit-bar pure-u-2-5"></div>
    </div>
  </div>
</div>

Try it now

Source Code : Output

1-5
2-5

Pure CSS Grids

Grid Unit Sizes

5ths-Based Units

Web Tutorials