Grid Systems

Grid systems are a design approach that is encouraged with most modern sites built with node.

If you can divide your website design up into a an arbitrary number of horizontal columns then node will provide you with tools to make modelling this in CSS easier.

You will inform some ContentCompilers as to what grid dimensions they are expected to operate in. For example this document has margins either side of it's content area:

1 column

2 columns

8 column content area

Once the Content Compiler understands the space that it has to work in, then it can make decisions as to how it should behave.


When you write a template, you declare the size of the grid region that you are working with and this forms a tree of the nested regions on the page. Each time that you nest a region, you request the GridDimensionMgr for the appropriate space to render onto. However it is possible to choose to restrict the size of the Grid and choose how your individual components should react at being asked to fit into a smaller space than they originally requested.

This can make the generation of responsive website designs in ways that are different from the conventional fluid layouts with sudden jumps that is commonly used. See for more details and an example.

Modifying grid proportions

When you write CSS for a Grid-based node system you do not specify absolute lengths in pixels any more. All measurements are done in terms of the size of the grid and the gutters between the grid, and deltas thereof. This means that if you change the dimensions of the grid then everything on the page adjusts as a result.

This proves invaluable for the design stages as the proportions of the Grid can be adjusted at any point in the process including after population. The system will ensure that all content, both text, image, embedded video etc is as much as possible automatically updated to the new dimensions.