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
Similar Reads
Pure CSS Table with Horizontal Borders A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em
2 min read
How to set padding inside an element using CSS? In this article, we are going to see how to set padding inside an element using CSS. Padding is considered as the space between content and its border. The padding creates space inside defined borders. The difference between padding and margin is that margin creates space outside borders and padding
1 min read
How To Use Grid-Row-Align And Grid-Column-Align? The grid-row-align and grid-column-align properties don't exist in CSS. Instead, CSS Grid uses properties like "align-items" and "justify-items" for controlling alignment across rows and columns, allowing precise positioning of grid items within their cells. so we will go to see how can we align the
3 min read
How to Align Columns in Nested HTML using CSS Grid? We can easily Align columns in nested HTML structures using a CSS grid. There are different approaches to do this such as Simple Nested Grid Alignment, Aligning Nested Grids with Specific Columns, and Responsive Nested Grids. Each approach serves different design needs, from basic grid layouts to mo
4 min read
How to Add Padding to All Sides in Tailwind CSS ? Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to eleme
3 min read