The grid is the underlying structure that provides a common framework for organizing and arranging all other elements. Using the same grid means every Red Hat piece is unified by a shared basic structure.

Our standard grid divides the live area of the page into 12 rows and 12 columns. A 12-column grid is uniquely flexible, allowing for 2-, 3-, or even 4-column layouts and asymmetrical designs.

Depending on the size of the piece, it may make sense to use a simpler grid derived from the standard—this book, for example, uses a 6×6 grid.


Our website uses a 12-column grid. Each column is 70px wide with 15px of padding on each side to form a 30px gutter.

Our collateral templates all use the same 4-column grid. The left-hand column is always a sidebar, while the three right-hand columns are the main text, graphics, and tables.

Since web banners are so small, a grid with fewer columns and rows works best. Depending on the proportion of the ad, try a 3×3 or 3×6 grid.