Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets. The Flash player plugin version 7 is required. Grids are drawn to page edges and margins when they are set, or to the dimensions of the default page, 1280 pixels wide by 1024 pixels high. The unit of measurement for text is the pixel.
Four panels contain controls for columns, text, rows and divisions. Page dimensions and margins are set under the columns tab. Columns are set by number or by width, when the text line-height option is enabled. Gutter width is in pixels. Text fields are added under the Text tab.
A text field remains active and may be modified until a new text field is added. The default font is Arial. Type in the correct font name to use another font on your system. Placeholder text or your own copy may be inserted into text fields. Negative leading values are not supported. The check box at the panel bottom to enables the line-height option for column width and row height using the active text field.