Layout

Grid Layout System

Grid is a two dimensional layout system. We use Grid as our main layout system when creating sections of content and nesting items within parent containers.

One

Using the class .Column on a parent tag will create a full width container.

1 Code Snippet

See the Pen Single Column by Wilmington University (@WilmU01) on CodePen.

Two Even

Using the class .ColumnTwo on a parent tag will create a container that will split nested items in two even columns.

1/2

Code Snippet

See the Pen Two Columns Even by Wilmington University (@WilmU01) on CodePen.

Two Uneven

Using the class .ColumnUneven4 or .ColumnUneven3 on a parent tag will create a container that will split nested items in two uneven columns. Each nested item should have the class .ColumnUneven-lg or .ColumnUneven-sm in order for this to function correction.

1/4

3/4

1/3

2/3

Code Snippet

See the Pen Two Columns Uneven by Wilmington University (@WilmU01) on CodePen.

Three

Using the class .ColumnThree on a parent tag will create a container that will split nested items in three even columns.

1/3

Code Snippet

See the Pen Three Colunns Even by Wilmington University (@WilmU01) on CodePen.

Four

Using the class .ColumnFour on a parent tag will create a container that will split nested items in four even columns.

1/4

Code Snippet

See the Pen Four Columns Even by Wilmington University (@WilmU01) on CodePen.

Auto-Fill

Using the class .ColumnAuto on a parent tag will create a container that will auto-fill columns with as many nested items as possible. Nested items will break to multiple lines depending on screen size.

Auto

Code Snippet

See the Pen Auto-Fill Columns by Wilmington University (@WilmU01) on CodePen.

Class List

.Column = single column layout
.ColumnTwo = two even column layout
.ColumnThree = three even column layout
.ColumnFour = four even column layout
.ColumnUneven3 = two column layout broken into one third and two thirds
.ColumnUneven4 = two column layout broken into one fourth and three fourths
.ColumnUneven-sm = Applied to child element to make one third or one fourth depending on the parent layout. Must have .ColumnUneven3 or ColumnUneven4 on the parent element
.ColumnUneven-lg = Applied to child element to make two thirds or three fourths depending on the parent layout. Must have .ColumnUneven3 or ColumnUneven4 on the parent element
.ColumnUneven = ten column layout that allows more layout control over child elements