Grid-based CodePen

Description

Create a CodePen in which you create a grid system. Show you ability to use math, CSS theories of classes and box model to make a 12-column grid for future CSS projects.

Objectives

Learning Objectives

Upon completion of this assignment, you should:

create a customized grid system
Understand the foundation of how basic grid systems are built

Performance Objectives

After completing this assignment, you be able to effectively

use CodePen to create a customized grid
make adjustments to columns to better use and understand grids.

Details

Deliverables

One CodePen saved to your own account and post it in the class chatroom.

Requirements

Create a CodePen that explores multi-column grid layouts for web design. There must be 12 columns, with a gutter of 20px in between them, in a container sized to 1140px. Give all columns a box-sizing of border-box and a padding of 5px each. Then, create the following column based combinations (which in total equal 12 columns):

6 + 6
2 + 6 + 4
3 + 3 + 6
5 + 7
8 + 4
9 + 3

Label each column with the number of columns it takes up

Bonus: Make the Grid SCSS friendly.