Why grid systems are no longer needed

Rigid grid systems have become outdated and unnecessary in a world where the screen widths of our devices are increasingly diverse. The solution is a flexible system that can be applied in any situation.
Robert Roose
By Robert Roose

Why grid systems are no longer needed

Where have all the grids gone?

In this blog post, designer Kyle Lambert wonders where all the grids have gone. His suspicion is that it is because our design tools have become increasingly advanced, ensuring that everything is more or less neatly aligned next to or below each other.

I believe that grids have disappeared because they are no longer necessary or can even cause problems. We live in a world where we have to consider thousands of different screen widths.

Of course, we can close our eyes and say that 320 pixels for mobile, 768 pixels for tablet, and 1280 - 1920 pixels for desktop is sufficient. But the reality is different. Since we can now fold phones, 320 pixels is no longer small enough, and we have to design and develop for screens that can be 240 pixels wide. And screens are also getting larger. They can be infinitely large in Virtual Reality.

A grid is no longer sufficient. As a designer, you must design for every screen width. Fortunately, this is becoming easier nowadays.

So how do you ensure everything is neatly aligned?

By providing designers and developers with the right tools and guidelines. Use a uniform system in a Design System with agreed distances (padding and margin) and maximum widths. By cleverly utilizing what is technically possible, namely the built-in grid and flexbox functions of CSS, you can ensure that visitors always see a nicely aligned screen, regardless of how large or small the screen is.

In the Design System I am currently working on, we have defined distances in so-called tokens:

  • --spacing-3xs: 2px
  • --spacing-2xs: 4px
  • --spacing-xs: 8px
  • --spacing-sm: 12px
  • --spacing-md: 16px
  • --spacing-lg: 18px
  • --spacing-xl: 24px
  • --spacing-2xl: 32px
  • --spacing-3xl: 64px
  • --spacing-4xl: 128px

It is possible to combine these tokens to achieve a specific distance.

Additionally, we have defined a number of maximum widths (608, 912, 1280 pixels, or full width). This way, we can prevent the layout from becoming unusable on larger screens.

Our design tools are also becoming increasingly flexible and are growing closer to what is already possible in CSS. The auto layout feature in Figma is essentially just flexbox in disguise. It largely offers the same options and capabilities for placing and organizing elements. You can create a layout that automatically adjusts as the canvas is resized.

Additionally, it is also possible to link the design tokens of your Design System to your Figma file, for example, with Tokens Studio. This creates synergy between design and development and ensures that everyone uses the same values for spacing.

As you can see, designers and developers in our Design System have a lot of freedom. We provide the tools and guidelines to design and build for every screen width and trust that the users of the Design System know what they are doing.

Let it go

Kyle concludes his blog with advice for designers to use a grid in their next design. My advice is the opposite. Let go of the grid and see how you can make your design as flexible as possible so that it looks good on every screen width.

The content of this field is kept private and will not be shown publicly.

Beperkte HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.