Introduction | TrueUI

Molecules | Layout

Columns

Sizes

.w-10

.w-20

.w-25

.w-33

.w-40

.w-50

.w-60

.w-75

.w-80

.w-90

.w-100

Multi column layouts are composed a by coupling a percentage width and float class to create the desired width. Columns must be cleared by wrapping the element with clear float class. See examples below.

Two Columns

.w-50

.w-50

Three Columns

.w-33

.w-33

.w-33

Four Columns

.w-25

.w-25

.w-25

.w-25

Build Responsive Layouts

Building a responsive grid layout can easily be done by composing classes together to adaptive to various screen width sizes. Here is a 4 column layout that adapts to different screen sizes.

Large Screens (Desktops)

.w-25-ns .w-33-m .w-100-sm

.w-25-ns .w-33-m .w-100-sm

.w-25-ns .w-33-m .w-100-sm

.w-25-ns .w-33-m .w-100-sm

Medium Screens (Tablets)

.w-25-ns .w-50-m .w-100-sm

.w-25-ns .w-50-m .w-100-sm

.w-25-ns .w-50-m .w-100-sm

.w-25-ns .w-50-m .w-100-sm

Small Screens (Tablets)

.w-25-ns .w-33-m .w-100-sm