Pure CSS Grids

"Pure CSS Grids" is a mobile-first responsive grid system that is based on fractions of available space. This system makes it easy to create grid-based layouts. It is lightweight and user-friendly, with classes such as .pure-g for grid containers and .pure-u-* for grid columns, where *represents the fraction of available space.

Pure.CSS Example

Pure CSS Responsive Grids

Pure CSS Grid Class: There are two types of PureCSS grid classes in the Pure CSS framework.

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

Grid class specifies by (pure-g) and the unit classes by (pure-u-*). Here, asterik(*) represents width of the grids.
In other words, the Pure CSS grid basically constructs rows and columns. The grid class is responsible for creating rows, while the grid unit class is responsible for columns.

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>

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>

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

How To Create Pure CSS Grid

To create a pure css 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. Let us see the step-by-step process to construct the grids.

Include PureCSS: First, add the Pure CSS stylesheet to the HTML file. You can download Pure CSS and include it locally, or use a CDN link for Pure CSS. Let's use a CDN link.

Pure CSS CDN Link
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">

Create Grid Container: Define the grid container so that it holds the grid items. Apply the `pure-g` class to the container to initialize the grid of Pure CSS.

Grid Container
    
    <div class="pure-g">
      
    </div>

Define Grid Items: Inside the grid container, create grid items as per your requirement. Assign the pure-u-* class to each grid item to specify the grid item's width. The * in pure-u-* represents the fraction of available space that the item should occupy. For example, pure-u-1-3 specifies that the grid item occupy one-third of the available space.

Grid Item
   
      <div class="pure-u-1-3">1/3</div>
      <div class="pure-u-1-3">1/3</div>
      <div class="pure-u-1-3">1/3</div>

This will create a row with three grid items, each occupying one-third of the available space.

Responsive Grid: PureCSS also provides predefined classes for creating responsive grids. To create a responsive grid in Pure CSS, use the pure-u-{sm|md|lg|xl}-* class. Here, * indicates the fraction of available width. For example, you can use pure-u-sm-* to specify the width of grid items for small-sized screens and above. Similarly, the pure-u-md-* class represents the grid item's width for medium-sized screens and above.

Responsive Grid
   
      <div class="pure-u-1 pure-u-md-1-2">1/2</div>
       <div class="pure-u-1 pure-u-md-1-2">1/2</div>

In this example, each grid item takes full width on small screens and one-half of the available space on medium-sized screens and above.

Customize as Needed: You can customize the grid layout further by adjusting the fractions according to your requirements and achieve your desired layout by applying margins or padding, or combining different classes.

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

Pure Regular Grid vs Responsive Grid

Both are used .pure-g, and pure-u-* classes to create rows and column respectively. Since the responsive grid uses all the breakpoints or screen sizes, hence it achieves responsiveness at each breakpoint. But, regular grid does not use screen sizes. Therefore, it is not responsive.

Regular Grid: It is an unresponsive grid because the width of the grid does not change at the breakpoints. Let us understand it with examples.

    Regular Grid
    
	<div class="pure-g">
	   <div class="pure-u-1-3">...</div>
	   <div class="pure-u-1-3">...</div>
	   <div class="pure-u-1-3">...</div>
	</div>
   
  

In this, the regular grid width will always be 1/3rd i.e. 33.33%, irrespective of the width of the screen. It means the width of the regular grid will be the same at each breakpoint, like small, medium, large, etc.

Responsive Grid: It is a responsive grid since it uses different grid sizes, such as small, medium, large, etc. Due to this, the width of the grid changes at the mentioned breakpoints, hence the appearance improves throughout the devices. Let us understand it through examples.

Responsive Grid
    
  <div class="pure-g">
    <div  class="pure-u-1 pure-u-md-1-3">...</div>
     <div class="pure-u-1 pure-u-md-1-3">...</div>
     <div class="pure-u-1 pure-u-md-1-3">...</div>
  </div>
   
  

The grid width will be 100% on small screens, but on the medium size screen and above the width will be 33.33%.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4