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 class specifies by (pure-g) and the unit classes by (pure-u-*). Here, asterik(*) represents witdh of the grids.
In other words, the Pure CSS grid basically constructs rows and columns. The grid class is responsive for creating rows, while the grid unit class is responsible for columns.

How To Create Pure CSS Grid: - To create a grid, you have to create the grid's rows using the grid class (pure-g), while to make a column inside the row, use the grid unit (pure-u-*) classes. At last, place the content inside the grid units.

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. 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>
    
Try it now

Source Code

          
            <div class="grids-example">
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">1-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">2-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-2-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">3-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-3-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">4-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-4-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">1</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">1-1</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-1"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">5-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-5-5"></div>
          </div>
        </div>
      </div>
    </div>          
        
Try it now

Source Code: Output

1-5
2-5
3-5
4-5
1
1-1
5-5

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>
    
Try it now

Source Code

          
            <div class="grids-example">
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-12</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-12"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">2-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-2-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">3-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-3-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-8</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-8"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">4-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-4-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-6</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-6"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">5-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-5-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-4</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-4"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">6-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-6-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">7-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-7-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-3</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-3"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">22-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-22-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">23-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-23-24"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">1-1</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-1"></div>
         </div>
      </div>
   </div>
   <div class="grid-unit pure-g">
      <div class="grid-unit-width pure-u">24-24</div>
      <div class="grid-unit-details pure-u-1">
         <div class="pure-g">
            <div class="grid-unit-bar pure-u-24-24"></div>
         </div>
      </div>
   </div>
</div>          
        
Try it now

Source Code: Output

1-24
1-12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
22-24
23-24
1
1-1
24-24

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">
   

Pure CSS Responsve Breakpoints

Key CSS media Query Applies Class Name
none none always .pure-u-*
sm @media screen and (min-width: 35.5em) ≥ 568px .pure-u-sm-*
md @media screen and (min-width: 48em) ≥ 768px .pure-u-md-*
lg @media screen and (min-width: 64em) ≥ 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) ≥ 1280px .pure-u-xl-*

Pure CSS Responsive Grid Classes

The followings are on the list of Pure CSS responsive grid classes:

Class Name Description
.pure-u-* It sets the container to occupy required space on any device, applicable to any screen size.
.pure-u-sm-* It sets the container to occupy required space on a small device (sm) with width ≥ 568px.
.pure-u-md-* It sets the container to occupy required space on a medium device (md) with width ≥ 768px.
.pure-u-lg-* It sets the container to occupy required space on a large device (lg) with width ≥ 1024px.
.pure-u-xl-* Sets the container to occupy required space on a extra large device (xl) with width ≥ 1280px.

Examples

Two Equal Responsive Column

The following example shows how to create two equal-width columns, on smaller and higher screen sizes.

First Column

Second Column

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">Column 1</div>
  <div class="pure-u-1 pure-u-sm-1-2">Column 2</div>
</div>          
        
Try it now

Three Equal Responsive Column

The this example, you can see three equal-width columns, on medium and higher screen sizes.

First Column

Second Column

Third Column

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
    Column 1
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
    Column 2
  </div>
  <div class="pure-u-1 pure-u-sm-1  pure-u-md-1-3">
    Column 2
  </div>
</div>          
        
Try it now

Four Equal Responsive Column

The the given below example, you can see four equal-width columns, on large and upper higher screen sizes.

First Column

Second Column

Third Column

Fourth Column

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2  pure-u-lg-1-4">
    Column 1
  </div>
  <div class="pure-u-1 pure-u-sm-1-2  pure-u-lg-1-4">
    Column 2
  </div>
  <div class="pure-u-1 pure-u-sm-1-2  pure-u-lg-1-4">
    Column 3
  </div>
  <div class="pure-u-1 pure-u-sm-1-2  pure-u-lg-1-4">
    Column 4
  </div>
</div>          
        
Try it now

Web Tutorials

Pure CSS Grids
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4