Pure CSS Responsive Grids
Last Updated :
20 Jul, 2022
Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically across all screen resolutions and sizes, and prevents unnecessary resizing in the websites.
Pure CSS Grid classes: There are two types of classes in Pure grid.
- Grid Classes (pure-g)
- Unit Classes (pure-u)
Pure Regular Grid vs Responsive Grid:
Regular Grid:
- Unresponsive but easy to use.
- A row is created by using the pure-g class.
- Columns within that row are created by using the pure-u-* classes. For example, pure-u-1-4 represents 1/4 or 25% width, pure-u-2-5 represents 40% width.
Syntax:
<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>
The width of the grid will be 1/3rd i.e 33.33%, irrespective of the width of the screen and it will not be user-friendly on all kinds of devices.
Responsive Grid:
- Customizable and mobile-friendly.
- Pre-defined classes of different grid sizes are used with a bit of personalization according to users' necessity.
Syntax:
<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>
On small screens, this grid will have a width of 100%, but on medium screens, it will have a width of 33.33%.
Media queries for grid formation: CDN link has to be used for the access of mobile responsive Pure CSS Grid. Before the project-specific style sheets, use the link provided below between head tags. In order to generate a media query according to the screen width, these keywords are attached to the Pure grid unit (pure-u) classes.
CDN link:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
The following keywords are used to create a grid.
| Key | CSS Media Query | Applies | Class name |
| sm | @media screen and (min-width: 35.5em) | ≥ 568px | .pure-u-sm-* |
| md | @media screen and (min-width: 48em) | ≥ 768px | .pure-u--* |
| lg | @media screen and (min-width: 64em) | ≥ 1024px | .pure-u-lg-* |
| xl | @media screen and (min-width: 80em) | ≥ 1280px | .pure-u-xl-* |
Note: In the classes, the asterisk sign (*) indicates the width of the grids and the number of columns. For example, '1-2' represents, that the div will cover '1/2' or 50% of the total width. 'em' is used instead of 'px' to generate the default media query, so that it responds to page zoom.
Example: This example will create 4 grids which will be 100% in width on the mobile screen, 50% in width on the medium screen, and 25% in width on the desktop screen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS Responsive Grids</title>
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/base-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/grids-responsive-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-md-1-1
pure-u-lg-1-2 pure-u-xl-1-4">
<p> Responsive Grid 1 </p>
</div>
<div class="pure-u-md-1-1
pure-u-lg-1-2 pure-u-xl-1-4">
<p> Responsive Grid 2 </p>
</div>
<div class="pure-u-md-1-1
pure-u-lg-1-2 pure-u-xl-1-4">
<p> Responsive Grid 3 </p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p> Responsive Grid 4 </p>
</div>
</div>
</body>
</html>
Output:
Responsive images in the grid: In Responsive Grids, images are also added as content. To maintain responsiveness .pure-img class is added inside the grid.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS Responsive Grids</title>
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/base-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<style>
.pure-img {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p> Responsive Grid 1 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<p> Responsive Grid 2 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p> Responsive Grid 3 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<p> Responsive Grid 4 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p> Responsive Grid 5 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<p> Responsive Grid 6 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p> Responsive Grid 7 </p>
</div>
</div>
<div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
<div class="l-box">
<img class="pure-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<p> Responsive Grid 8 </p>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://purecss.io/grids/#pure-responsive-grids
Similar Reads
Primer CSS Responsive Grids
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS Responsive Margins
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Pure CSS Grids Units Sizes
Pure CSS is a CSS framework. It is a free and open-source tool collection for creating responsive web applications. It was developed by Yahoo and is used for creating faster, more beautiful, and more responsive layouts. Pure Grids are easy to work with and very powerful in creating grid layouts in w
3 min read
Pure CSS Regular Grid vs Responsive Grid
Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating online programs and responsive web pages. This was developed by Yahoo and is used to make websites that load faster, look better, and are easier to use. Bootstrap is effectively replaced by it. When developing
4 min read
Pure CSS Grids
While creating a genuine responsive website layout the grid system is a crucial tool for web developers. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such
4 min read
React Rebass CSS Grid
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use CSS Grid in React rebass. CSS Grid is an important component that is required in each development. CSS Grid is useful for arranging direct child elements without having to apply ad
2 min read
React Suite Grid Responsive
React Suite is a front-end library designed for the middle platform and back-end products. React Suite Grid component provides a grid layout that provides 24 grids, It helps in responsiveness. For responsiveness we pass the following props to the Col Component: xxl: It takes a number as a value. The
4 min read
Primer CSS Gutters Grid
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Pure CSS Grids Complete Reference
Pure CSS is a popular framework & an open-source tool, developed by Yahoo, for creating responsive websites & web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap. The G
1 min read
Primer CSS Grid
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
4 min read