Pure CSS applying Padding and Borders to Grid Units

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.

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.

Output:

 

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