Components

Grids-Simplified

CSS grid gives you the power to add structure to your design, create responsive layouts, and fix elements to horizontal and vertical positions.

Grid 50-50 layout

Add the class .grid-50-50 to the container and apply the layout which distributes the content in equal part of the width.

1
2

Grid 70-30 layout

Add the class .grid-70-30 to the container and apply the layout which distributes the content in equal part of the width.

1
2

Grid 30-70 layout

Add the class .grid-30-70 to the container and apply the layout which distributes the content in equal part of the width.

1
2

Grid 3 item layout

Add the class .grid-50-50-50 to the container and apply the layout which distributes the content in equal part of the width.

1
2
3

Code

Just change the class as mentioned below and you are good to go.