Three Column Layout
The Three Column layout divides content into three equal thirds.
The Three Column layout is good for galleries or any page that needs to display lists of links or buttons, especially graphical links.
Three columns can be useful for Home or landing-type pages where several options need to be displayed as a sort of sub-navigation area. The Home page of this project uses the Three Column layout.
The Three Column layout can also be inserted into the middle of form to show form elements in an inline display on larger screens.
NOTE: columns only apply to normal to wider screen sizes, since columns scale to 100% once the screen size drops to 48em.
Here the column-third class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-third class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-third class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here is where the columns are cleared.
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here is where the columns are cleared.
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of grey is used for a light grey background
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of info is used to create distinction.
Here the column-third class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of shadow is used to create a box shadow.
Here is where the columns are cleared.
