Grids and Layout Systems

What is a Grid System and Why Do We Need It?

Imagine building a house without a ruler or measurements — everything would be crooked and inconsistent. A grid system is the ruler and measurements of the digital designer.

A grid is an invisible structure that organizes design elements into consistent rows, columns, and margins. Without a grid, every page will look different from the next and every designer will place elements in different positions.

Benefits of using a grid:

Consistency: all pages look as if they are from the same product
Speed: instead of deciding where to place every element from scratch, the grid gives you a framework to work within
Collaboration: all designers and developers speak the same language
Responsiveness: the grid makes it easier to convert designs to different screen sizes
Readability: organized content is easier to read

The 8-Point Grid System

The 8-Point Grid system is the current standard in digital interface design. The idea is simple: all dimensions in your design must be multiples of 8.

Why 8 Specifically?

The number 8 divides easily: 8 ÷ 2 = 4, 8 ÷ 4 = 2
Most screen sizes divide evenly by 8
Google Material Design and Apple HIG use a system built on 8

Practical Application

All these values must be multiples of 8:

Padding: 8, 16, 24, 32, 40, 48
Margin: 8, 16, 24, 32
Gap between elements: 8, 16, 24
Icon sizes: 16, 24, 32
Button heights: 32 (small), 40 (medium), 48 (large)

Exception: font sizes and line heights do not have to follow the 8-point system — these values are determined based on visual hierarchy.

The Grid in Figma

In Figma, you can enable the grid easily:

Select the Frame
In the Layout Grid properties, add a grid
Select Grid at 8px
Make the grid color light with low opacity

The dots that appear are grid lines — every element should align to them.

Column Grid

The column grid is the main method for organizing content horizontally in web pages and applications.

Column Grid Components

Columns: the spaces where content is placed
Gutters: the spaces between columns
Margins: the space between the screen edge and the first column

The 12-Column Grid

The most famous grid in web design is the 12-column grid. Why 12? Because the number divides by:

2 (6 + 6) — two equal halves
3 (4 + 4 + 4) — three columns
4 (3 + 3 + 3 + 3) — four columns
6 (2 × 6) — six columns
Unequal divisions: 3 + 9, 4 + 8, 5 + 7

This flexibility makes the grid suitable for almost any layout.

Common Settings for the 12-Column Grid

Desktop (1440px):

Columns: 12
Column width: 72px
Gutter: 24px
Margin: 100px on each side

Tablet (768px):

Columns: 8
Gutter: 16px
Margin: 32px

Mobile (375px):

Columns: 4
Gutter: 16px
Margin: 16px

Spacing System

White space is not empty space — it is an active design element that improves readability and builds visual hierarchy.

Spacing Scale

Based on the 8-Point system, here is the recommended spacing scale:

Name	Value	Usage
2xs	4px	Very tight spacing (between icon and text)
xs	8px	Tight spacing (inside buttons)
sm	12px	Small spacing
md	16px	Medium spacing (base padding)
lg	24px	Large spacing (between elements)
xl	32px	Larger spacing (between sub-sections)
2xl	48px	Very large spacing
3xl	64px	Between main sections
4xl	96px	Between page sections

The Law of Proximity

Elements that are close together appear related and elements that are far apart appear separate. Use this to organize information:

Space between a heading and its content: small (8-16px)
Space between two different sections: large (32-48px)
Space between page sections: very large (64-96px)

A clear difference in spacing lets the user understand the page structure without reading a single word.

Alignment

Alignment is the first thing the eye notices — even if the user is not conscious of it. A single misaligned element makes something feel wrong.

Types of Alignment

Left/right alignment: the most common for texts. In Arabic (RTL), right alignment is the default
Center alignment: for main headings and hero sections. Do not use it for long text
Grid alignment: all elements must align to grid lines

Alignment in RTL Design

In Arabic design:

Text aligns to the right
Menus start from the right
Primary buttons are on the left (opposite of LTR)
Progress moves from right to left

Tip: when designing for RTL, think as if you are seeing the design in a mirror — not everything flips, but the general direction changes.

Common Layout Patterns

1. Single Column Layout

The simplest layout — all content in one column in the center of the page. Suitable for:

Articles and blog pages
Login pages
Mobile

Content width: usually 600-800px

2. Two-Column Layout

A main content column and a sidebar. Suitable for:

Dashboards
Email
Note-taking applications

Common ratio: 8 content columns + 4 sidebar columns (or 9 + 3)

3. Card Grid Layout

Equal cards in a grid. Suitable for:

Product pages
Portfolio gallery
Search results

Settings: 3-4 cards per row on desktop, 2 on tablet, 1 on mobile.

4. Broken Grid Layout

A creative layout that deliberately breaks grid rules. Elements overlap and are different sizes. Suitable for:

Creative websites
Landing pages

Warning: difficult to implement and make responsive. Only use it when appropriate for the content.

5. F-Pattern Layout

Based on how the user scans the page — the eye scans horizontally at the top then moves vertically downward. Suitable for:

Home pages
News pages
Search engines

Auto Layout in Figma

Auto Layout is the most powerful feature in Figma for designers. It lets you build flexible components that automatically adapt to their content — just like CSS Flexbox works on the web.

Core Concepts

Direction: the direction — horizontal or vertical
Gap: the space between internal elements
Padding: the space between content and the frame edge
Alignment: the alignment of elements within the frame

Practical Uses

Simple button: horizontal Auto Layout + Padding 12 top/bottom and 24 right/left + Gap 8 between icon and text

Card: vertical Auto Layout + Padding 16 on all sides + Gap 12 between elements

List of items: vertical Auto Layout + Gap 0 + Padding 0 (each item has its own padding)

Navigation bar: horizontal Auto Layout + Space Between + Padding 16

Fill Container and Hug Contents

Hug Contents: the element takes exactly the size of its content — suitable for buttons and labels
Fill Container: the element fills the available space — suitable for input fields and flexible columns
Fixed: fixed width or height — for images and icons

Working with Constraints

Max Width and Min Width

Max Width: a maximum limit on content width. Very important for readability — text that stretches to the full width of a large screen is impossible to read
Min Width: a minimum width. Important for buttons — do not let a button shrink to the point where its text gets cut off

Variable Content

Always design for the longest and shortest content:

What does the card look like if the title is one line? And if it is three lines?
What does the list look like if it has 3 items? And if it has 30?
What does the table look like if a column has a single-digit number? And if it has a 10-digit number?

This is called Edge Cases and it is what separates a robust design from a fragile one.

Common Layout Mistakes

1. Inconsistent Grid

When spacing changes from page to page or even from section to section on the same page. Define a spacing scale and follow it.

2. Margins Too Small on Mobile

Content that touches the edge of the screen feels cramped. 16px margin is the minimum on mobile.

3. Not Using Auto Layout

Every frame in Figma should have Auto Layout unless there is a specific reason. A design without Auto Layout is not scalable.

4. Ignoring White Space

Empty space is not waste — it is visual breathing room. A cluttered design makes the user feel overwhelmed.

5. Designing for Only One Size

If you designed only for desktop, when the developer converts the design to mobile they will need to make design choices themselves — and that is not their job.

Practical Exercise

Design a home page for a news application:

Build the grid: 12 columns, Gutter 24px, Margin 100px (desktop)
Header: a navigation bar spanning the full width
Hero Section: a main news story occupying 8 columns + side news in 4 columns
Content Grid: news cards in a 3×3 grid
Footer: information and links in 4 columns

After finishing the desktop, create a tablet version (8 columns) and mobile version (4 columns). Notice how the content adapts with the change in column count — this is the essence of responsive design.