Rows and Columns Examples

This page was made to demonstrate how the row and column stylings work on Allsteeloffice.com. 🤯

Column Widths
The columns are divided in widths of 12, aka a row takes up the width of 12 columns. If you go over 12 columns, then the column will default to the next row. This 12-column layout/grid is a standard used by libraries like Bootstrap. 

Ex. A row with columns 6-6 would give a row 2 columns that take up half the row, 6/12 = 50%.

Ex. A row with columns 4-4-4 would give a row 3 columns that take up a third of the row, 4/12 = 33%

The widths are just using fractions that go up to 12! 😀

Breakpoints
To understand how the columns work, we first need to understand the breakpoints. 🤔

I like to think of the site having 4 different layouts.

We have SMALL which is any browser width less than or equal to 576px. 
   » This formatting would be designed for devices like cell phones. 📱

We have MEDIUM which is any browser width more than 576px and less than 1024px. 
   » This formatting would be designed for devices like tablets or chromebooks.

We have LARGE which is any browser width more than 1024px and less than or equal to 1640px. 
   » This formatting would be designed for devices like laptops or smaller monitors. 💻

Lastly, we have MAX which is any browser width more than 1640px. 
   » This is formatted using the large width, but with grayed out margins or "gutters" added on the left and right sides of the website. 
   » This formatting would be designed for regular or ultrawide monitor displays. 🖥

Officially CSS-wise, the site has 6 stylings for columns, but 3 of them are less commonly used. The specifics of each from largest to smallest are as follows:

XXLarge: min-width: 102.5em;
XLarge: min-width: 75em;
Large: min-width: 64em;
Tablet: min-width: 48em;
Medium: min-width: 36.0625em;
Small: Everything smaller than medium

Styling Rule of Thumb

Contents
Large
Medium
Small
Combined Widths
Row/Column-ception