Pastel UI

Grid Layout

The Grid Layout is a series of containers, rows and columns to layout and align content. It uses CSS grid-based approach to layout the websites.


2 Column Grid Layout

You can get the 2 column layout by using the grid-cols-2 class alongside the grid class to your div tag.

Column 1
Column 2

3 Column Grid Layout

You can get the 3 column layout by using the grid-cols-3 class alongside the grid class to your div tag.

Column 1
Column 2
Column 3

Holy Grail Layout

Holy Grail is a layout pattern that is very common on the web. It consists of a header, a main content area with fixed width navigation on the left, content in the middle and a fixed width sidebar on the right and then a footer.

You can get a ready-made Holy Grail layout by using the grid-holy-grail class alongside the grid class on your div tag.

Header
Main Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur officia facilis consequuntur in commodi sunt molestias corporis doloribus sapiente sed.

Footer