Pure CSS Responsive Grids
Pure CSS responsive grids have the ability to adjust their layout dynamically based on the user's device or viewport size of the screens. These grids generally contain rows and columns that allow users to organize the content in a flexible and effective way.
Example
Thirds
Thirds
Thirds
Responsive Grid Classes: There are the following responsive grid classes in the Pure CSS framework.
.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 or the number of columns in the grid.
How To Create Pure.CSS Responsive Grid
Follow the steps given below to create a responsive layout.
Include PureCSS: First of all, include the PureCSS framework in the HTML document.You can download it and then include it locally or link it via a CDN link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">
Set Up Grid Container: Create a container for grid layout. To define a Pure CSS grid container, use the pure-g class.
<div class="pure-g">
</div>
Define Grid Items: Create grid items inside the grid container using pure-u-* classes to define the width of each item. If you want to specify different widths for different screen sizes, then use grid responsive classes like pure-u-sm-*, pure-u-md-*, and pure-u-lg-*.
<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>
Responsive Grid: It dynamically adjusts grid layout according to the device screen size. Use the pure-u-{sm|md|lg|xl}-* classes to create responsive grids. Here, * indicates the fraction of available width and sm, md, lg, xl denotes small, medium, large, and extra large devices.
For example, the pure-u-sm-* class specifies 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.
The pure-u-lg-* class represents the grid item's width for large-sized screens and above, and so on.
<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>
Pure CSS Responsive Grid 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
<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>
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
<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>
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
<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>
Web Tutorials
