📐

Layout Grids

Inspired by this great article and summarized for you.

One of the easiest ways to achieve an organized design is to apply a grid system. It’s a tried and tested technique that first found favor in print layout.

Newspaper using Grid systems to separate different elements
Newspaper using Grid systems to separate different elements

They are a lot of grid out there and before diving into the differrent layouts, let get our terminology right:

The purple parts are the
The purple parts are the field elements

Field Elements are your blocks of design, whether that be text, image, or a combination of both. Background colors don’t really count as field elements unless they are a container for your text/image.

image

Columns are the thick colored blocks that make up the content width of your design. Field elements are to sit on a certain number of columns.

Traditionally in a design system, the column width doesn’t change but the number of columns change from 12 on desktop, to 8 on tablet, and to 4 on mobile.

image

Gutters are the space between the columns. 20px is a common gutter size, and this spacing will be really important when you have a grid of card elements.

image

Side margins also known as outside gutters are the amount of white space outside of your content width. For a more accommodating design, the side margins increase as you go up in device width. Side margins on mobile are usually 16–32px, and vary a lot between tablet and desktop. Whatever you choose as the side margin, will be the minimum white space you allow when you shrink your browser. When you expand your browser from this point, there will be more white space until the next breakpoint.

Placement rules

1 • Do not leave field elements in the gutters

image
image

2 • It’s okay to nest elements inside fields that don’t align to the grid, as long as the parent field itself sits on columns

image

How does it work for responsive?

Differences constraints set for responsive
Differences constraints set for responsive

image

In a traditional design grid, the column widths and gutters stay the same, just the number of columns change. Why? And how does that work? This was to make things easier when you designed. If a set of three cards sat on 4 columns each on desktop, on tablet you would show two cards and wrap the third one so that it’d show on a second row. Yay! You didn’t need to do any resizing, because you already knew that it sat on four columns. On mobile the answer is easy too, you would just show one card, and the rest stacked beneath it. If you wanted, you could also get creative and choose to only show one card on mobile, or do a horizontal scroll. These breakpoints are the point of reference in code.

Fixed grids

Fixed grids are simple elements without constraints that stays centered until they arrived at a breakpoint where they move to another design layout.

It’s responsive but not ideal for every screen sizes and not enjoyable when using.

When you shrink from desktop to tablet, you’ll get to the next breakpoint and there will just be lots of side margins shrinking until the next breakpoint. Text doesn’t wrap, and images don’t dynamically change.

image
image

Fluid grids

fluid grids on the other hands enables an ideal layout configuration for any screen sizes. Merging breakpoints and component-based constraints. They’re always showing you the best UX you can have.

As you shrink the window, things will change dynamically, your text is wrapping, and elements are getting narrower. However, these elements of yours still won’t change layout until you hit the next breakpoint that you designed.

image

Hybrid Grids

It’s also common practice to use a combination of fluid and fixed grids in the experience. Sites usually are fluid when it goes down to mobile size because of the many different device sizes.

Responsive Grid layouts

Next up

✍️
UX writing

Dive Deeper