Ultimate Guide To 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. It uses mainly two types of grid classes:

• pure-g: grid class
• pure-u-*: unit classes

Grid Unit Sizes

The pure grid uses 5th and 24th units sizes. These unit sizes cover almost every grid. Grid unit uses pure-u-* class where * indicates width of the grid. For example, to create a cell of 50% width, you can use unit class name pure-ui-1-2.

5ths-Based Units

The 5ths-Based unit grid system uses .pure-u-x-25 unit classes where x can be any number between 1 and 25. It provides grid's width.

General Syntax
<div class="pure-g">
  <div class="pure-u-x"> X where x can be any number between 1 and 25</div>
</div>

24th Based Units

The 24ths-Based grid system uses .pure-u-x-24 unit classes where x can be any number between 1 and 24. It provides grid's column width.

General Syntax
<div class="pure-g">
  <div class="pure-u-x">...Inner Elements...</div>
</div>

Understand Pure Grids

In Pure’s grid system, You can create a row by using the .pure-g class, while to create columns within that row use pure-u-* classes.

Three Column Grid
<div class="pure-g">
  <div class="pure-u-1-3">Thirds</div>
  <div class="pure-u-1-3">Thirds</div>
  <div class="pure-u-1-3">Thirds</div>
</div>

Four Column Grid
<div class="pure-g">
  <div class="pure-u-1-3">Fourth</div>
  <div class="pure-u-1-3">Fourth</div>
  <div class="pure-u-1-3">Fourth</div>
  <div class="pure-u-1-3">Fourth</div>
</div>

Pure.CSS Responsive Grid System

Pure has a mobile-first responsive grid system that can be used through CSS class names. It builds on top of the default grid.
How To Use Responsive Grid: To use the responsive grid, you must add the responsive grid system CDN link to the project.

Responsive CDN Link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">

If you want to learn more about this, click here.