Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pure CSS Grids

  • Last Updated : 18 Oct, 2021

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 in various devices. The 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 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:

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 : 

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 :




My Personal Notes arrow_drop_up
Recommended Articles
Page :