Grids

Introduction

Grids are one of the basic cornerstones for layouts in web. They are used to structure the web page and make them visually appleaing

ClutchUI provides a easy way to implement grids.

Equal Grids

With equal grids, the grid items take up equal amount of space.

There are two types of equal grids. grid-2-equal and grid-3-equal

Note: Make sure to add the display-grid utility class to the parent container.

Two equal grids

Using grid-2-equal in your parent container.

Three equal grids

Using grid-3-equal in your parent container.

Split grids

These grids serve specific purpose and they are split based on percentage.

You can use the following classes for percentage split grids.

grid-80-20,grid-70-30 and grid-60-40

Note: Make sure to add the display-grid utility class to the parent container.

Grids 80% and 20%

Using grid-80-20 in your parent container.

Grids 70% and 30%

Using grid-70-30 in your parent container.

Grids 60% and 40%

Using grid-60-40 in your parent container.