When building website layouts, especially fluid layouts with float, you will have to round some widths up or down. Unfortunately, not all browsers round numbers in the same way. Different rounding of width can break your layout. This problem has also been described as the sub-pixel rounding issue. The Zen Grid system solves this sub-pixel rounding issue.
The Zen Grid has no original Less version, but porting it to Less is possible. You can download some example code at https://github.com/bassjobsen/LESS-Zen-Grid. After downloading the example code, you can edit the files with your favorite text editor.
With the client-side less.js
compiler, you can inspect the result of this recipe in your browser. To get more insight into the idea behind the Zen grid, compiling the Less code with command-line lessc
will be recommended too. In the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less, you can...