Grid Design

Grids have been used for a long time in design. They help us align content on the page and on the screen.

A common pattern is a 12 column grid. 12 columns are used because they can be easily grouped to create 3 columns, 4 columns, 2 columns, or six columns. Each column has a gutter between itself and the column beside it. All the gutters should be the same width.

There have been many CSS grid systems created over the years. Example: 960.gs

Recently,with CSS grid, the process for doing this has become much easier.

Here Brad Traversy does a tutorial on creating a grid in CSS. Note how all the values he uses for his fractions are numbers that divide evenly into 12.

Last Updated: : 8/25/2019, 6:02:21 PM