Course List >> HTML5 and CSS3 >> Design and UX >> 3: CSS Grids
Scroll up or hover over the breadcrumbs to view the navigation bar

CSS Grids

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.

Points to Ponder

  • 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?

Your Assignment

  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 The 960 grid system, which is a basic grid system which can be really useful for building layouts. They have examples and downloadable templates too so you can print them out and use them for designing your site. Just look through the site; we'll be covering the Bootstrap and Foundation grid systems later.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150