Pure CSS applying Padding and Borders to Grid Units

Last Updated : 07 Jul, 2022

Pure CSS is a free and open-source CSS framework. It is a set of instruments for developing responsive websites and online applications. This was created by Yahoo and is used to create websites that are quicker, more aesthetically beautiful, and more user-friendly. It effectively replaces Bootstrap. The responsive design was considered when creating Pure CSS. As a consequence, we get pre-built, consistent responsive layouts for all platforms.

Pure CSS Grids are used to create layouts and make responsive layouts by adding the pure-g class to a container. There are no specific classes to add which will add padding or borders to grid units but we can use traditional CSS to make that happen. There are two ways to implement this, which are stated below.

Basic 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.

Syntax:

<div class="pure-g">...</div>

Example 1: This example describes one way to add padding and border is to nest an <div> element inside a grid unit and you have to add style to that child container.

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">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">

    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .l-box {
            padding: 8rem;
            border: 1rem solid darkcyan;
            background-color: beige;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h2>
                Pure CSS applying Padding and 
                Borders to Grid Units
            </h2>
        </div>

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

Output:

Example 2: This example describes another approach to adding padding and border to the grid units is to style those grid units straightaway. This approach might distort the layout, we just need to add the property border-sizing: border-box to the grid units.

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">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
    
    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .pure-g > div {
            box-sizing: border-box;
            padding: 8rem;
            border: 1rem solid darkgrey;
            background-color: lightcyan;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h2>
                Pure CSS applying Padding 
                and Borders to Grid Units
             </h2>
        </div>

        <div class="pure-g">
            <div class="pure-u-1-4">
                    1st Column
            </div>
            <div class="pure-u-1-4">
                    2nd Column  
            </div>
            <div class="pure-u-1-4 o-box">
                    3rd Column  
            </div>
            <div class="pure-u-1-4">
                    4th Column  
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://purecss.io/grids/#applying-padding-and-borders-to-grid-units

Border and Spacing in Tailwind CSS

triashabiswas

Improve

Article Tags :

Pure CSS applying Padding and Borders to Grid Units

Similar Reads

Thank You!

What kind of Experience do you want to share?