Grids (v1)


Grids are another extension of the design world. There’s just something much more pleasing about navigating through a site that properly uses a grid to lay out the content than one which has ignored all the C.R.A.P principles and put things in place willy-nilly.

In this section, you’ll get a look at how to use CSS to lay out the elements of your page using a grid.

Learning Objectives

  • Why are grids effective for helping site layout?
  • What are the major different types of grids in use today?
  • How could you design your own grid (on paper)?
  • How can you implement your own grid in CSS?


  1. Read Basic Grids from CSS-Tricks.

  2. Read Fluid Grids from A List Apart.

  3. Read through the Responsive Grid with Media Queries Tutorial from TutsPlus. You don’t need to actually build it, but feel free to.

  4. Glance through Unsemantic, which is a fluid grid system which can be really useful for building layouts. They have demos that you can take a look at. Just look through the site; we’ll be covering the Bootstrap and Foundation grid systems later.

Additional Resources


When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment:
    • Is it urgent? Did you try reaching him on Slack