________
|y|y| | |
-----------
| |y| | |
-----------
| |y| |x|
-----------
If this makes more sense. In the example, with a grid. It's more about making something a certain width or height (proportionately). So if you had a grid that was 4 wide (columns) like in the example. Each column would be a certain pixels wide. Therefore each row would be a certain pixels wide. So you could make rows and columns that were proportionate to each other, making the layout more symmetrical. So instead of having a layout with columns that were say 153 pixels wide, they would be 160 pixels wide. Or three columns that were 124, 375, and 238. You'd have 240, 260, and 500. All divisions of 20. Then you would make your header 180 in height. Instead of something like 132. It also allows you to make you spacing in multiples of 20. So you might have 20 and 20 between your 3 columns. Instead of 13, and 34 or something. Basically you're designing to a specific "snapped ratio".
It's not only how designers should be designing in the first place, but it makes things easier on the developer. So they aren't creating retarded css rules of .column1=187. Instead every thing is a multiple of 20. So everything is not only easier to code, but it flows better and leaves everything open for better future proofing. Two years down the road you want to implement anything, you can do so in a multiple of 20.
Hope that helps.
