Pure CSS Responsive

Pure CSS responsive layout has the ability to adjust itself as per available viewport width. There are following classes that are very helpful for creating a responsive layout. Let us see the predefined classes:

  • .pure-u-*- It is compatible with all the device viewport widths and is used to set the container that takes the required space on any device..
  • .pure-u-sm-* - It is used to set the container in the small devices that occupy the required space on a device with width ≥ 568px.
  • .pure-u-md-* - It is used to set the container in the medium devices that occupy the required space on a device with a width ≥ 768px.
  • .pure-u-lg-* - It is used to set the container in the large devices that occupy the required space on a device with a width ≥ 1024px.
  • .pure-u-xl-* - It is used to set the container in the extra-large devices that occupy the required space on a device with a width ≥ 1280px.

Please keep in mind that, here * specifies the required width of the grids and the number of columns in the grid.

Understand Pure Grids: - In the Pure grid, you can create a by using the .pure-g class and column by using the pure-u-* classes.Here's a grid with three columns:

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

Thirds

Thirds

Thirds

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 Responsive Layout
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4