Two Grid Examples

CSS layout is a bit complicated. There’s a lot to learn, and different browsers can behave in vastly different ways.

• Learn CSS Layout is a nice site that introduces the building blocks of CSS layout.
• CanIUse.com is a useful site that lets you check browser support for HTML, CSS, and JS features.

Here are two existing layout systems that use a grid for page layout.

Gridly

If you want a lightweight grid, without much in the way of options, have a look Gridly. It uses Flexbox, so it won’t work every browser. Here’s the browser support for Flexbox.

Have a look at an example here, or on JS Bin.

Bootstrap

If you want something with more options and control, you could look at one of the more popular Front-end Frameworks: Bootstrap. It has a lot of stuff in it, but for now we’re only interested in the the Grid section.

Have a look at an example here, or on JS Bin.

But wait, there’s more!

If you want to learn more about Front-end Frameworks in more detail, check out fef.projectcodex.co. There’s even a special section on Grid Systems.