Pure CSS – Grids:

In this tutorial, we will learn about the Grid views available in Pure. Grid means division of web page to place the elements in the required format. Pure Grid mainly consists of 2 types of classes.

1. Grid Class

Grid class name can be defined as pure-g.

2. Unit Class

Unit Class name can be defined as pure-u.

Not only the above class names serve their purpose, but also other class names depending on how much width an element requires. These widths of Units can be represented as fractions. For example, pure-u-1-4 would have width of 25%, and pure-u-1-10 would have 10%. In the below example, you can understand that pure-g should be the root class for all the child Unit classes.

Example:

<div class="pure-g">
    <div class="pure-u-1-4"><p>First Unit</p></div>
    <div class="pure-u-1-4"><p>Second Unit</p></div>
    <div class="pure-u-1-4"><p>Third Unit</p></div>
    <div class="pure-u-1-4"><p>Fourth Unit</p></div>
</div>