Designing on a horizontal layout grid brings balance and visual harmony to the web page. Grid-based layouts are essential for precise, graphically consistent designs. There are many CSS grid systems and templates available online, and you can easily create your own. When you cut through the hype, CSS grids are basically iterations of grid units and gutters. xy.css defines its grid as:
Columns: 60px
Gutters: 24px
Here is the xy.css grid calculated to 36 grid-units (gu):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
60 144 228 312 396 480 564 648 732 816 900 984 1068 1152 1236 1320 1404 1488 1572 1656 1740 1824 1908 1992 2076 2160 2244 2328 2412 2496 2580 2664 2748 2832 2916 3000 This is the essence of grid-based layouts: defining your structural widths in terms of grid units (gu). So for example, your main column may be 8gu, and your sidebar 4gu, for a total width of 12 grid units. By expressing our grid values as percentages, we create liquid-grid designs that retain definition as they scale with screen size.
The xy.css template provides preset classes of various column widths, but doesn’t actually apply any styles by default. It’s up to the designer to define layout structure using one of two methods:
- Apply styles to existing elements (no extra
classattributes) - Apply styles via the preset classes (non-semantic markup)
Whenever possible, write clean, semantic markup and use the power of CSS to target existing selectors based on context. It’s okay to use the preset classes if/when needed, just keep in mind that moving forward means leaving the extraneous markup behind.