Pure CSS Responsive Layout

Pure CSS responsive layout has the ability to adjust itself as per available viewport width.

Pure CSS provides the 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.

General Syntax

      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"></div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"></div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"></div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"></div>
</div>

Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <div class="graybox">
      <p>First Column</p>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <div class="pinkbox">
      <p>Second Column</p>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <div class="orangebox">
      <p>Third Column</p>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <div class="graybox">
      <p>Fourth Column</p>
    </div>
  </div>
</div>

Try it now

Source Code : Output

First Column

Second Column

Third Column

Fourth Column

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

Pure CSS Responsive Layout

Web Tutorials