SG is prepared for 4 distinct ranges of screen size: screens < 720px, screens > 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that's tuned to the size of their browser window. Say goodbye to horizontal scrollbars.
Most grid systems use one class for all units of a single size, leaving units oblivious to where they fit into the grid. That leaves you with
.last classes. With SG each slot knows whether it's first, middle, or last in its respective row; no extra classes needed.
Creating the code for your grid should be the least of your problems when building a site. That's why SG keeps things simple and straightforward with as little markup and classes as possible. Even nesting grid slots doesn't require extra classes.
Start with the
.grid wrapper. Inside the wrapper Create
divs with a class of
.row. Inside each row, create slots for content. Apply the associated
.slot-# class, and voilà!
This very site is built on SG. But to give you a better idea of it's capabilities, I've created an example grid below. It demonstrates a variety of the combinations possible.
Originally created by Conor Muirhead. The idea and foundation of SG was originally developed by the great team at Crowd Favorite. Currently hosted by web design agency Ramotion. See also cssgrid and fluidhtml
Usage permitted under the MIT License.
Slots 0-5 represent the 6-column grid. These slots can be combined to create a 3-column grid too.
Slots 6-9 represent the 4-column grid.
Combining slots is as simple as connecting their slot numbers with dashes.
In some situations, you might want to combine the 4- & 6-column grids in a single row. Just use the slot numbers that best represent each slots position in that row.
.rows, and then assemble the slots in each row as per usual.