Pure CSS Regular Grid vs Responsive Grid

Last Updated : 01 Aug, 2022

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 Pure CSS, the responsive design was taken into account. As a result, we receive ready-made, uniform responsive layouts for all platforms.

Pure CSS Grids are used to generate layouts and create responsive layouts by applying the pure-g class to a container. Grid units cannot have padding or borders added by particular classes, but we may achieve this with conventional CSS. These can be done in one of two ways, which are listed below.

Pure CSS Grid Used Classes:

pure-g: This class is used to create a pure CSS grid system.
pure-u-m-n: This class is used to add the units of the grid system. The (m,n) can range from (1-5, 0-5) or (1-24, 0-24). This class is mainly used to describe the fixed grid sizes or this is used to create a pure CSS regular grid.
pure-u-*-m-n: This class is also used to create a grid system. The main feature of using this class is the star given in the class replaced by the default screen sizes provided by Pure CSS which are sm, md, lg, xl, and xxl. These screen sizes are used to specify how much space the grids will take in the respective screen size. This class is mainly used to create a responsive Pure CSS grid.

Pure CSS Regular Grid vs. Responsive Grid: The fundamental difference between the two is the usage of class which is used to create this which is specified above. In the regular grid, we specify the width taken by the grid and it is fixed irrespective of the screen size.

In the responsive grid, we specify the width taken by the grid in specific screen sizes, it dynamically changes the sizes of the grid when the screen size is changed.

The below example specifies that each unit of the grid will take up 50% width, irrespective of the screen size. We can understand that the regular grid is unresponsive.

Syntax:

<div class="pure-g">
    <div class="pure-u-1-2"> ... </div>
    ...
</div>

The below code snippet demonstrates the creation of a responsive grid using pure-u-1 and pure-u-md-1-4 classes. This means that the units will have a width: 100% on only small screens and a width: 25% on medium-sized screens and above.

Syntax:

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

Example 1: The code below demonstrates the creation of the pure CSS regular grid and we can see how it behaves in different screen sizes. We have used the pure-u-1-2 class for the units which specify width:50% on all screen sizes.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-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">
    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .l-box {
            background-color: aquamarine;
            border: 0.5rem salmon solid;
        }
        body {
           margin-left:10px;
           margin-right:10px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h2>Pure CSS Regular Grid vs. Responsive Grid</h2>
        </div>

        <div class="pure-g">
            <div class="pure-u-1-2">
                <div class="l-box">
                    1st Column Regular Grid
                </div>
            </div>
            <div class="pure-u-1-2">
                <div class="l-box"> 
                    2nd Column Regular Grid
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: The code below demonstrates how to create a Pure CSS Responsive grid and we can see how it behaves in different screen sizes. Here we have used pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4 classes for every unit, which specifies that each div will have width:50%, width:33.33% and width:25% in small, medium and large screen-sizes respectively.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-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">
    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .l-box {
            background-color: aquamarine;
            border: 0.5rem salmon solid;
        }
        body {
           margin-left:10px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h2>Pure CSS Regular Grid vs. Responsive Grid</h2>
        </div>

        <div class="pure-g">
            <div class="pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4">
                <div class="l-box">
                    1st Column Responsive Grid
                </div>
            </div>
            <div class="pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4">
                <div class="l-box"> 
                    2nd Column Responsive Grid
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://purecss.io/grids/

Pure CSS Regular Grid vs Responsive Grid

priyanshuchatterjee01

Improve

Article Tags :

Pure CSS Regular Grid vs Responsive Grid

Similar Reads

Thank You!

What kind of Experience do you want to share?