Pure CSS Grids Units Sizes

Last Updated : 08 Nov, 2022

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 web applications.

Pure CSS Grids Unit Sizes Classes:

p-g: The ‘pure-g’ class is a grid class of the Pure CSS grid system which works as a wrapper of the unit classes.
p-u or p-u-*: The ‘pure-u’ or ‘pure-u-*’ is used to divide the width of the display screen into fractions If we want to get the m/n the part of the display screen, then we can add the class ‘pure-u-m-n’ to that specific element.

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">

Grids Units Sizes: Pure comes with both 5ths and 24ths-based grids and these are given below:

5th Based
- 1-5: It will occupy the 1/5th part of the display.
- 2-5: It will occupy the 2/5th part of the display.
- 3-5: It will occupy the 3/5th part of the display.
- 4-5: It will occupy the 4/5th part of the display.
- 1: It will occupy the 1/5th part of the display.
- 1-1: It will occupy the whole part of the display.
- 5-5: It will occupy the whole part of the display.
24th Based
Similarly for 24th based grid also, the size of the width will depend on the size, If we want to occupy the 3/24th space, then we can use the class as ‘pure-u-3-24’. The same concept works for all the other classes. The classes of 24-based grids are: 1-24, 1-12, 2-24, 3-24, 1-8, 4-24, 1-6, 5-24, 1-4, 6-24, 7-24, 1-3, 8-24, 3-8, 9-24, 5-12, 10-24, 11-24, 1-2, 12-24, 13-24, 7-12, 14-24, 5-8, 15-24, 2-3, 16-24, 17-24, 3-4, 18-24, 19-24, 5-6, 20-24, 7-8, 21-24, 11-12, 22-24, 23-24, 11-12, 4-24.

Syntax:

<div class="pure-g">
    <div class="pure-u-1-5">...</div>
    <div class="pure-u-2-24">...</div>
    <div class="pure-u-11-12">...</div>
</div>

Example 1: Below example demonstrates the usage of 5th-based grid unit size in an <div> element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" 
          content= 
"A layout example that shows off a blog page with a list of posts."> 
    <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"> 
</head> 
  
<body> 
    <center> 
        <div> 
            <h1 style="color: green"> 
                GeeksforGeeks 
            </h1> 
            <h2>Pure CSS Grids Units Sizes</h2> 
        </div> 
        <div class="pure-g"> 
            <div class="pure-u-1-5" 
                style="background-color: red;"> 
                <p>1-5</p> 
            </div> <br /> 
            <div class="pure-u-2-5" 
                 style="background-color: green;"> 
                <p>2-5</p> 
            </div> <br /> 
            <div class="pure-u-3-5" 
                 style="background-color: lightblue;"> 
                <p>3-5</p> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Example 2: Below example demonstrates the usage of the 24th-based grid unit size in an <div> element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <meta name="description" content= 
"A layout example that shows off a blog page with a list of posts."> 
    <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"> 
</head> 
  
<body> 
    <center> 
        <div> 
            <h1 style="color: green">GeeksforGeeks</h1> 
            <h2>Pure CSS Grids Units Sizes</h2> 
        </div> 
        <div class="pure-g"> 
            <div class="pure-u-1-24" 
                 style="background-color: lightblue;"> 
                <p>1-24</p> 
            </div> <br /> 
            <div class="pure-u-1-12" 
                 style="background-color: green;"> 
                <p>1-12</p> 
            </div> <br /> 
            <div class="pure-u-4-24" 
                 style="background-color: red;"> 
                <p>4-24</p> 
            </div> 
            <div class="pure-u-5-8" 
                 style="background-color: orange;"> 
                <p>5-8</p> 
            </div> 
            <div class="pure-u-5-6" 
                 style="background-color: lightgreen;"> 
                <p>5-6</p> 
            </div> 
            <div class="pure-u-1-3" 
                 style="background-color: black; color: white;"> 
                <p>1-3</p> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>