Grid Examples
2 columns equal
Column 1- 1of2
This column’s height is independent of the heights of the other columns in this row, they will not match each-other.
To that end, these columns will not naturally act like table cells without some extra css help.
2 columns 60/30
2 columns 75/25
3 columns equal
Column 2- 1of3
This column’s height is independent of the heights of the other columns in this row, they will not match each-other.
To that end, these columns will not naturally act like table cells without some extra css help.
3 columns 50/25/25
4 columns equal (using flexbox model to equalize heights)
Column 2- 1of4
This column’s height will match the other columns in this row, the containing div has the additional class of .row-eq-height.
2 rows, 3 columns, heights equal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
