Pure.CSS Grids - Pure.CSS

What is Pure.CSS Grids?

PURE.CSS allows the concept of Pure Grid with two types of classes,

  • A grid class pure-g,
  • A unit class, pure-u-*.

Below are the rules to be used in Pure Grids.

  • Widths of Units to be given in fractions. Let us see an example, pure-u-2-3 represents 2/3 or 60% width, pure-u-2-5 represents 2/5 or 40% width and so on.
  • Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* class names.
  • All content of a grid unit should be rendered properly.


Grid Unit Sizes

Pure Grid will come with 5th and 24th unit sizes. Below are illustrated examples displaying some of the available units which can be added to pure-ui-.

For example, if we want to create a cell of 50% width, we can use a css style pure-ui-1-2.

5ths-Based Units

purecss_5th_based.htm


Output

 Pure.CSS Grids Output

24ths-Based Units

purecss_24th_based.htm


Output

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Pure.CSS Topics