Final Resource: Grids

Grid Structure is worth 10 points

Here are the notes from the grading rubric:

  • A grid is used with both valid and semantic HTML and CSS applied.
  • Grid properly applied to HTML
  • CSS for grid properly linked
  • Content fits inside the grid (intentionally breaking grid for visual effect is OK)

You can use the same 960 grid system,, we used in class, or you can pick your own system. You just need to use one and I need to see it in use.

960 Grid System

This page on the system has many of the same resources as on the current page, but it also goes into more detail about downloading the

960 Grid System Resources

Here are more resources:


Many of you are not sure on the CSS underlying the Grid System so watch the screencasts that help explain that more clearly. There are three of them and they go from basic CSS (also one I linked to in the CSS section here) to using the 960 grid system.

CSS and the Box Model

CSS and Positioning with Float

More Info

Read this tutorial to help you understand better if you are having problems


Here is some information on creating a custom sized grid that uses the same grid classes as the (so you can use the size and number of cols you want and still keep what you’ve learned about applying the 960 grid classes).

These screencasts show how to use the Variable Grid system to create a grid with the widths and number of columns of your choosing. There are a number of tools out there that help with this but the cool thing about this one is that it writes a CSS file for you that uses the exact same classes as the grid system. That way you can use everything your learned about the .container and .grid_x and .alpha and .omega classes but using your own grid dimensions.

YouTube Custom Grid Tutorial


These links are to the screencast broken up into three parts. They are also the straight video files so you can right-click and download them. To see the tutorial as one movie watch the YouTube video

There are a few other tools and links used in the tutorial. All of them are listed here:

One response to Final Resource: Grids

  1. [...] View Full Resource [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!