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
Followings are the important concept regarding grid and unit classes:
pure-u-1-2represents 1/2 or 50% width,
pure-u-4-5represents 80% width and so on.
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
If you run the above source code then the output look like: