Grid
Introduction
Grids allow you to layout your content on your website in a
structured manner,
thus allowing flexibility in visual representation across a
wide range of sizes
PowertrainUI provides its users with 2-column and 3-columnm
grids, which are fully responsive.
These can be either max width or take up a specific size on
any device screens
To start using grids in your project, make sure to use the
grid-container
class in the parent grid element.
2-column Grid
Create your 2 column grid with ease, while maintaing a
visually appealing layout of your content always.
You can achieve this using the
grid-2
class.
3-column Grid
Create your 3 column grid with ease, while maintaing a
visually appealing layout of your content always.
You can achieve this using the
grid-3
class.
Non-traditional grid layouts
With PowertrainUI you are given a variety of choices on how to
visually style your grid layouts.
The first example demonstrates different grid spans useful to
maintain grid responsiveness, using the
grid-span-1
,
grid-span-2
&
grid-span-3
classes respectively.
The second and third example demonstrate the fixed sizing of
grid columns that can be provided. We allow for an 80-20,
70-30, 60-40 split for 2-column grids using
grid-80-20
,
grid-70-30
&
grid-60-40
classes respectively.