Pure CSS Grids
Last Updated :
22 May, 2023
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 a grid system.
Pure CSS Grids Classes:
- Grid Classes (pure-g)
- Unit Classes (pure-u)
- Responsive grid modification to unit classes
Include the Grid System: The grid system is not included as a part of pure.css as the media queries cannot be overwritten so we have to put these three CSS files to implement the grid system. The link to the files is given below. For the latest version, you can head over to the official website of Pure.CSS grids.
<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/base-min.css”> <link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/grids-min.css”> <link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css”>
Grid Classes (pure-g): The ‘pure-g’ class is known as the grid class of the Pure.CSS grid system. It works as a wrapper of the unit classes. Every Pure.CSS unit class(pure-u) remains as the child of the Grid Class(pure-g).
Syntax :
<div class="pure-g">
..... Some Unit Classes ....</div>
Unit Classes (pure-u): The ‘pure-u’ or ‘pure-u-*’ helps us to divide the width of the display screen into fractions. If we want to get the m/n the part of the display screen for a div. Then we have to add the class ‘pure-u-m-n’ to that specific div. Suppose we want to occupy the 2/5th part of the display screen then we have to include the class ‘pure-u-2-5’ to that specific div.
Syntax :
<div class="pure-g">
<div class="pure-u-2-5">...Inner Elements...</div>
<div class="pure-u-3-5">...Inner Elements...</div>
</div>
Example: In this example, we are using Unit Classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Grids</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5">
<p>
An interview-centric course designed
for non-CS/pre-final/final year students
and working professionals to land their
dream jobs in service and product-based
companies like Amazon, Microsoft, TCS,
Cognizant and more!
</p>
</div>
<div class="pure-u-4-5">
<p>
An interview-centric course designed for
non-CS/pre-final/final year students and
working professionals to land their dream
jobs in service and product-based companies
like Amazon, Microsoft, TCS, Cognizant and more!
</p>
</div>
</div>
</body>
</html>
|
Output: Throughout the entire output we can see that our grid is very much useful for dividing the screen width but it is not responsive. To make the layout responsive we have to work with the ‘Responsive grid modification to unit classes’.
Responsive grid modification to unit classes: Pure.CSS provides us four different keywords, sm , md , lg, xl. These keywords are attached with the Pure grid unit classes(pure-u) and used to generate a media query according to the screen width. The condition and media query for all these classes are given below :
|
Keyword
|
Classname
|
Applies
|
CSS Media Query
|
|
xl
|
.pure-u-xl-*
|
≥ 1280px
|
@media screen and (min-width: 80em)
|
|
lg
|
.pure-u-lg-*
|
≥ 1024px
|
@media screen and (min-width: 64em)
|
|
md
|
.pure-u-md-*
|
≥ 768px
|
@media screen and (min-width: 48em)
|
|
sm
|
.pure-u-sm-*
|
≥ 568px
|
@media screen and (min-width: 35.5em)
|
To generate the default media query the ’em’ is used instead of ‘px’ so that the media queries respond to the zoom of the webpage accordingly.
Syntax :
<div class="pure-g">
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
</div>
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Grids</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<div class="pure-g">
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 1
</p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 2
</p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 3
</p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 4
</p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 5
</p>
</div>
<div class="pure-u-md-1-2
pure-u-lg-1-3 pure-u-xl-1-6">
<p>
Text 6
</p>
</div>
</div>
</body>
</html>
|
Output :
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...