HOME HTML 5 CSS 3 JAVASCRIPT MySQL PHP Python Pure CSS WordPress MS AD* Linux* Blog Howto Tools Online Editor »
Home » Pure CSS » Pure CSS Grid

Pure.CSS Grid

So let's continue our topic. In the concept of Grids we use two types of classes, pure-g, a grid class and pure-u or pure-u-*, the unit classes. These are the basic classes which are responsible for the responsive nature of the website. These classes let us define the grids in rows and columns according to our needs. The grid class will define a grid and then inside it the elements will use the unit classes to define the content.

Note: All content which is visible to people needs to be contained inside a grid unit for proper rendering.

Following are the rules to use Pure Grids.

  • As we have discussed previously, width of Units are defined in fractions. For example, pure-u-1-4 represents 1/4 or 25% width, pure-u-4-5 represents 4/5 or 80% width and so on.
  • All the unit elements must be a child of grid element. See the example below to understand how an unit element should be put inside a Grid. Notice the classes.
Syntax
<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

Grid Unit Sizes

Pure Grid comes with 5th and 24th unit sizes. These unit sizes will cover almost every grid, you can use these unit sizes to render your content. The examples of some of the available units, which can be appended to pure-ui-. For example, to create a cell of 40% width, you can use a css style pure-ui-2-5. Try more unit sizes by urself to get familiar with the grid usage.

5ths-Based Units

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Grids </title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
font-family: Roboto, 'Liberation Mono', Courier, monospace;
}
.grid-unit {
padding-left: 30px;
padding-top: 5px;
}
.grid-unit .grid-unit-width {
font-family: Roboto, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 30px;
border-radius: 5px;
background: #7559ca;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">5-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-5-5"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Output

Pure.CSS Grids
1-5
2-5
3-5
4-5
1
1-1
5-5

24th Based Units

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Grids </title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
font-family: Roboto, 'Liberation Mono', Courier, monospace;
}
.grid-unit {
padding-left: 30px;
padding-top: 5px;
}
.grid-unit .grid-unit-width {
font-family: Roboto, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 30px;
border-radius: 5px;
background: #7559ca;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-12</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">2-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">3-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-8</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">4-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-6</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">5-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-4</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">6-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">7-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-3</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">22-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">23-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1</div>
<div class ="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">24-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Output

Pure.CSS Grids
1-24
1-12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
22-24
23-24
1
1-1
24-24






Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors



Follow Us: