Grid
A grid is 2 dimensional layout used for dipslaying content along rows and columns.
Elixir offers the following range of cards - 2-Column grid, 3-Column grid, and 4-Column grid.
Grid with 2 Columns
This is a grid layout with 2 columns, and 1 column in small screens.
To generate a grid layout with 2 columns, use the base class grid along with the supporting class col-2.
Nature Card
Clear water amongst the peaceful mountains!
Copy the code below to generate a basic 2 columns grid.
Grid with 3 columns
This is a grid layout with 3 columns, and 1 column in small screens.
To generate a grid layout with 3 columns, use the base class grid along with the supporting class col-3.
Jane Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti vitae rem asperiores, repellat aliquid commodi laboriosam amet nisi officiis reprehenderit.
John Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti vitae rem asperiores, repellat aliquid commodi laboriosam amet nisi officiis reprehenderit.
Anonymous
B
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti vitae rem asperiores, repellat aliquid commodi laboriosam amet nisi officiis reprehenderit.
Copy the code below to generate a basic 3 column grid.
Grid with 4 columns
This is a grid layout with 4 columns. The grid is displayed with a 3 column layout in medium screens, 2 column layout in tablet sized screens, and 1 column layout in mobile screens and smaller.
To generate a grid layout with 3 columns, use the base class grid along with the supporting class col-4.
Copy the code below to generate a basic 4 columns grid.