This project's process began
with first deciding the width of the
overall grid structure. A 1,360-pixel width is
very close to the most common screen resolution
width of 1,366 px, while also allowing for simple and clean
division when calculating the size of columns and margins.
Being divisible by 60, this grid width also allows utilizing the measurements of Smith’s original 12-column grid with 60px wide columns and 10px wide margins. Using these measurements, it was possible to create a 1,360px wide 17-column grid based on Smith's structure.
Continuing to build upon Smith’s system, I utilized his 12-column grid CSS stylesheet and added to it by completing the calculations needed to create the additional columns. The resulting CSS sheet is coded to provide the larger 17-column width container, additional grid columns, margin widths, prefixes, suffixes, pushes, and pulls. Essentially, it’s Nathan Smith’s 960 Grid System, but bigger—for larger screens. Check out the finished prototype here or by using the link above.