Pure CSS Grids

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like: