Use the Manuscript Grid for articles
Manuscript Grid or Single Column Grid is basically a rectangle on a page that contains the main content. The grid allows for generous white space in the layout to enhance the reading experience on long form content.
In print design, the golden ratio is often used to create such rectangles.
On the web where the page size — device viewport — is unpredictable, simply declaring a max-width of 60ch to 70ch in CSS will do the trick. Exhibit A: this manual.
Use the Column Grid in print
Column Grid — not to be confused with Modular Grid, more on that later — is most common in magazine and newspaper layouts. The grid allows paragraphs of text to flow into multiple columns. It makes effective use of all available space, therefore reducing the amount of paper needed for printing. The more columns there are, the more flexible for a layout to fit more text.
On the web, Column Grid can be rendered with CSS columns. The technique is very underutilized though, because its rigid column nature is not practical with fluid web design.
Use the Modular Grid for web layouts
Modular Grid and Column Grid both divide up content into multiple columns, but Modular Grid produces modules and has the concept of rows. Its reading flow is also drastically different, going left to right, top to bottom, as opposed to Column Grid flowing top to bottom, left to right.
Majority of pages on the web utilizes the Modular Grid. It was made popular by CSS frameworks like Bootstrap and Foundation. It can be rendered with either CSS grid or flexbox.
Modular Grid is great for user interface design. Whether you need a row of cards or a group of buttons, it’s got you covered.
Use the Masonry Grid for collages
If you are a fan of Pinterest, you have seen the Masonry Grid effectively in action. It is a variant of the Modular Grid but each grid item is not confined to a uniform aspect ratio, completely breaking the row concept. Its reading flow is generally still left to right, top to bottom, but due to the differently sized modules, the flow gets broken in most cases.
This grid is not recommended for anything that requires logical reading order, but it certainly has its use for a collage of images or when you want to recreate some Mondrian masterpieces.
You can create this grid on the web with CSS grid but it only has support in Firefox at the time of writing this manual. You will need to write heavy JavaScript to make it work cross browsers.
Use the Baseline Grid in a pixel-perfect world
Ah, Baseline Grid, a grid I love to hate. This grid was born out of the OCD mindset of designers. They want every value to fall on even numbers and everything to align technically. A popular Baseline Grid is the 8-Point Grid.
In a pixel-perfect environment such as the popular design tool Figma, Baseline Grid makes sense and it is very effective at keeping a consistent flow. However, the web is not pixel-perfect, there are mainly three factors that would easily throw off the baseline grid: fluid typography, fluid spacing, and video or image embeds in unpredictable dimensions.
Unless you have full control of the content or you are designing fixed dimension layouts, Baseline Grid is not practical on the web.
Use the Holy Grail Grid for documentation
Oh my god! This is the grid to end all grids. The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.
Wikipedia says it best.
Nowadays, it is not that hard to create this grid on the web. Many documentation sites are using it to display global navigation on top, secondary side navigation on the left, table of contents navigation on the right, main content in the middle, and additional information on the bottom as the footer.
I have created a version of this grid for a design system I previously worked on.
Can I go gridless?
Absolutely.
Donnie D’Amato actually wrote extensively about this approach, and David Carson also says Never snap to grid
in his master class. However, grid is a necessary foundational design knowledge. It will help you when you are just starting on your designer journey. Know the grid before you break the grid
, a wise mentor told me. Once you are a mature designer, then do whatever the fuck you feel right.