DEV Community

Cover image for Pure.CSS Grids: A Complete Guide with Examples
Rachit Joshi
Rachit Joshi

Posted on

Pure.CSS Grids: A Complete Guide with Examples

#css #tpoint #tech #guide

Creating a responsive page layout can become much easier when you use a grid system. Pure.CSS provides a lightweight grid system that helps developers arrange content into flexible columns without writing a large amount of custom CSS.

In this guide, we'll explore how Pure.CSS grids work, understand its grid classes, and create simple examples using fractional column widths.

What Is a Pure.CSS Grid?

Pure.CSS includes a grid system for creating responsive layouts. It mainly uses two types of classes:

pure-g — defines the grid container.
pure-u-* — defines the width of a grid unit.

A grid container holds the individual grid units, and the unit classes determine how much horizontal space each element occupies.

Understanding pure-g

The pure-g class is applied to the parent element that contains your grid columns.

For example:

The elements inside this container should use Pure.CSS unit classes so that the layout can be calculated correctly.

Understanding pure-u-*

The pure-u-* classes determine the width of individual grid elements.

Pure.CSS uses fractions to represent widths. For example:

pure-u-1-2 = 50%
pure-u-1-3 = approximately 33.33%
pure-u-1-4 = 25%
pure-u-1-5 = 20%
pure-u-1 = 100%

This makes it possible to divide a page into proportional sections without manually calculating percentages.

Basic Pure.CSS Grid Example

First, include Pure.CSS in your HTML page:

rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

Then create a simple two-column layout:

Left Column Right Column

Here, each column takes half of the available width.

Creating a Three-Column Layout

You can also divide the available space into three equal sections:

Column One Column Two Column Three

Each grid unit occupies approximately one-third of the container.

Creating Unequal Columns

Grid units don't have to be equal.

For example:

Sidebar Main Content

The first section occupies 25% of the available width, while the second occupies 75%.

This type of layout is useful for websites with a sidebar and main content area.

24-Based Grid Units

Pure.CSS also supports a more granular 24-unit grid system.

This allows developers to create smaller fractional widths.

For example:

1/24 23/24

The 24-based approach provides more flexibility when designing complex layouts. The TPointTech tutorial describes these units using the pure-u-x-24 concept, where the numerator can range from 1 through 24.

Complete Example

Here is a simple responsive grid example:

<!DOCTYPE html>


Pure.CSS Grid Example 
<meta
    name="viewport"
    content="width=device-width, initial-scale=1">

<link
    rel="stylesheet"
    href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

<style>
    .box {
        padding: 30px;
        text-align: center;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
</style>
Enter fullscreen mode Exit fullscreen mode 
<div class="pure-g">

    <div class="pure-u-1-2">
        <div class="box">Column 1</div>
    </div>

    <div class="pure-u-1-2">
        <div class="box">Column 2</div>
    </div>

</div>
Enter fullscreen mode Exit fullscreen mode

This creates two grid sections, each occupying half of the available space.

Important Rules for Pure.CSS Grids

When working with Pure.CSS grids, keep these points in mind:

Use pure-g for the Container

The parent element should use:

class="pure-g"
Use Grid Unit Classes for Children

Elements inside the grid should use classes such as:

pure-u-1-2
pure-u-1-3
pure-u-1-4
Keep Content Inside Grid Units

For predictable rendering, content should be placed inside a grid-unit element rather than directly inside the pure-g container.

Benefits of Pure.CSS Grids

Pure.CSS grids offer several advantages:

Lightweight layout system
Simple class-based structure
Fractional column sizing
Responsive-friendly design
Less custom CSS required
Easy creation of multi-column layouts
Pure.CSS Grid vs Traditional CSS

With traditional CSS, you might manually define widths such as:

.column {
width: 50%;
}

With Pure.CSS, the same concept can be expressed through:

This makes the intended layout ratio immediately visible in the HTML.

Conclusion

Pure.CSS Grids provide a straightforward way to create flexible, proportional layouts. The pure-g class establishes the grid container, while pure-u-* classes define the width of individual units.

The framework supports both 5-based and 24-based fractional units, allowing developers to create anything from simple two-column layouts to more detailed page structures.

If you're learning responsive web design, Pure.CSS grids are a useful example of how a lightweight CSS framework can simplify layout development.

Top comments (0)