How to work with Columns & Grids in Adobe XD

How Do Columns and Grids Work in Adobe XD?

Key Takeaways

• Understand why twelve columns make a useful starting point for website layouts.

• Set up layout grids, margins and gutters in Adobe XD.

• Plan how desktop cards rearrange on mobile.

• Choose suitable breakpoints with your developer.

• Use square grids for consistent app spacing and reuse grid settings across artboards.

Those coloured vertical strips on an artboard are not there to make your design look complicated. They give you a structure to work against. Once you understand what they represent, the decisions around desktop layouts, mobile layouts and spacing become a lot less mysterious.

There is a little theory involved here. A cup of tea might help. We will start with desktop columns because they are easier to see, then work down to mobile and finish with square grids for apps.

Set Up a Desktop Layout Grid in Adobe XD

You might start a project by designing for mobile first, then create the desktop version afterwards. For understanding columns, though, a wide desktop artboard gives us more room to explain what is happening.

1. Select the Artboard tool and choose an appropriate desktop preset. A width of 1920 pixels is the example here, not a compulsory size for every website.

2. Name the artboard something useful, such as Homepage.

3. Select the artboard by clicking its name. You can also drag that name with the Selection tool to move the artboard around the canvas.

4. In the properties panel, enable Grid.

5. Choose Layout, rather than Square.

6. Set the column count to 12 if it is not already there.

When choosing an artboard size for a real project, check current browser and screen-size information rather than assuming one preset will always be the right answer. The artboard is a useful design reference, not a promise that everyone will have that exact screen.

Why Do Website Layouts Often Use Twelve Columns?

The first reason is wonderfully ordinary: lots of people use them. That matters because your design has to fit into a development workflow, not just look tidy inside XD.

A developer will often use an existing framework rather than build every part of a website from scratch. Many of those frameworks use a twelve-column system. Choosing a compatible grid can make the design easier to implement.

Talk to your developer before committing to the grid. A simple question is enough: “Will a twelve-column layout work with the framework you are using?” It is much easier to agree on that now than to discover a mismatch later.

Twelve Divides into Useful Layouts

The other big advantage is the maths. Twelve divides neatly into several arrangements:

• One item across: it spans all twelve columns.

• Two items across: each spans six columns.

• Three items across: each spans four columns.

• Four items across: each spans three columns.

That gives you plenty of flexibility without changing the underlying structure. Thirteen columns, on the other hand, would be rather awkward for these equal divisions.

Five equal items do not fit neatly into twelve whole-column spans. That is a limitation of this particular arrangement, rather than a reason to force every possible layout into it.

Columns Keep Different Pages Feeling Connected

Think of a magazine layout. The content changes from page to page, but the underlying alignment gives the publication a consistent feel.

The same applies to a website. Your homepage and contact page can contain different things while still sharing a recognisable structure. Columns help stop everything from shifting into unrelated positions as you move between pages.

Build a Simple Page Against the Columns

You do not need detailed graphics to test a layout. A few rectangles will do nicely.

Start with a navigation bar at the top, then add a large hero area beneath it. That hero might hold a sale announcement, a product introduction or another main call to action.

Below the hero, add repeatable units for products, services or features. These are often called cards.

Try three cards across, each spanning four columns. Then try four cards across, each spanning three. The grid stays the same, but the arrangement changes neatly.

To duplicate a rectangle while dragging it, hold Alt on Windows or Option on Mac. Keep the card edges aligned to the grid so that you are testing a repeatable layout, rather than positioning each box by eye.

The important point is that twelve columns do not mean twelve visible pieces of content. A single component can span several columns.

Make the Layout Work on Mobile

A responsive website is the same website adapting to the available screen size. It is not a completely separate website every time someone changes device.

Create a second artboard at the mobile size you are designing for. You can initially give it twelve columns too, so the relationship with the desktop structure is clear.

The navigation remains at the top, and the hero still has its place beneath it. However, the generous space around the desktop hero may need to shrink considerably on mobile. There simply is not the same room to play with.

For a basic demonstration, you can reduce the mobile grid margins to zero to explore an edge-to-edge arrangement. Treat that as a layout choice for the example, not a rule that all mobile content must touch the screen edges.

Change the Card Span, Not Just the Card Size

Four cards across might look perfectly comfortable on desktop. Squeeze those same four cards into a narrow mobile screen and they can become too small to read.

Instead of shrinking everything, change how much of the grid each card occupies:

• Desktop: each card spans three of twelve columns, giving four cards across.

• Mobile, two across: each card spans six columns, giving two rows of two cards.

• Mobile, one across: each card spans all twelve columns, stacking all four vertically.

That is a useful way to explain your intention to the developer. The card changes from a three-column span to a six-column or twelve-column span at the appropriate screen size.

Why Use Four or Six Columns on a Mobile Artboard?

Twelve columns can get very narrow on a phone-sized artboard. They may be useful in the underlying framework, but rather fiddly to design over.

You can simplify the visible guides to six columns or four columns. Both divide neatly into twelve, so they can still represent useful groupings within the larger system.

I often use six for mobile, and four is common too. The point is to make the guides useful, not to fill the artboard with more detail than you need. Make sure the relationship between those guides and the implementation is understood.

Plan the Space Outside Your Website Content

A large screen does not necessarily mean the content should stretch across its entire width.

The HubSpot homepage example shows a central content area with substantial empty space on either side. The background extends across the browser, while the main text and graphics occupy a narrower region.

Imagine increasing a desktop artboard from 1920 pixels to 3000 pixels wide. You might still keep the main website content within a central set of columns, using much larger outer margins.

That leaves another design decision: what appears outside the content area?

• A background colour can extend across the full width.

• A coloured section can continue beyond the central content.

• Decorative graphics or a repeating pattern can occupy the extra space.

• The outer area can simply remain empty.

Whatever you choose, remember that narrower screens may not show those outer areas. Keep the main content inside the intended content region, and consider how the surrounding background continues on very large displays.

Use Breakpoints to Plan Meaningful Layout Changes

Some responsive changes happen gradually. A graphic becomes smaller or shifts towards one side as the browser narrows. Others are more obvious, such as a desktop navigation menu switching to a compact mobile menu.

A breakpoint is a screen-width threshold where the layout changes its behaviour.

In the HubSpot example, narrowing the browser changes the size and position of the hero graphic. At a smaller width, the navigation changes too. Reduce the width further and the text and illustration rearrange into a more vertical layout.

These are design decisions. The page is not merely being scaled down like a photograph.

How Many Sizes Should You Design?

A common set of design references includes:

• Mobile.

• Tablet.

• Desktop.

A larger project might require five sizes: small mobile, large mobile, tablet, small desktop and large desktop. A more demanding brief may involve still more.

For a smaller job, you might provide only mobile and desktop designs, with intermediate behaviour agreed with the developer. That does not mean tablet behaviour can be ignored. It means you are not necessarily producing a separate artboard for every intermediate size.

Agree on the required breakpoints and deliverables before designing them. Ask what the developer needs rather than guessing how many versions to produce.

Understand Columns, Gutters and Margins

There are three parts of a layout grid to keep straight:

• Columns: the vertical areas that content aligns to or spans.

• Gutters: the spaces between columns.

• Margins: the spaces outside the grid on the left and right.

In the layout setup used here, you control the gutters and margins, and the columns expand to fill the space that remains.

Choose Consistent Gutter Spacing

Useful spacing values to explore include 8, 16, 24 and 32 pixels. Increments of eight appear frequently in web and app design.

On mobile, you might use an eight-pixel gutter. On desktop, you might try sixteen or twenty-four. The exact choice depends on the layout and the system you have agreed to use.

The useful habit is consistency. Choose a sensible spacing system rather than giving every gap a slightly different measurement.

Subtract Both Margins from the Artboard Width

If your artboard is 1920 pixels wide and has a 140-pixel margin on each side, the central grid area is:

1920 − 140 − 140 = 1640 pixels

Both margins count. It is easy to subtract one and forget the other.

XD can also calculate arithmetic expressions in numeric fields, which is handy when your mental maths decides to take the afternoon off.

Do not get too hung up on finding one perfect width, though. People use different monitors, laptops and phones, and they turn devices between portrait and landscape. Your designs establish the structure; responsive implementation handles the range of available widths.

Use a Square Grid for App Spacing

So far, we have been designing a website that can appear on desktop, tablet and mobile. A mobile app is a different design context.

For the app-spacing approach here, switch from Layout to Square in the grid settings and use an eight-pixel square size.

Rather than concentrating on how a card spans a responsive website grid, you are using a regular spacing unit to position interface elements:

• Keep elements a consistent distance from the sides.

• Maintain repeatable gaps between components.

• Align items to a predictable underlying structure.

The distinction is about what you are using the guide to do: columns organise the website layout, while square guides help with precise spacing in the app exercise. Confirm the intended spacing system with the app developer and the frameworks they are using.

Reuse Grid Settings Across Artboards

Once you have a grid set up the way you want, you do not need to enter all those settings again for every artboard.

1. Select the artboard with the grid settings you want to reuse.

2. Choose Make Default in the grid controls.

3. Select another artboard.

4. Choose Use Default to apply those settings.

This is a simple way to keep related artboards consistent, particularly when you have several pages that should share the same column count and spacing.

The bigger lesson is that a grid is a shared plan. It helps you align the design, explain responsive changes and work more smoothly with a developer. A little understanding of front-end web design and CSS is useful here, even if you have no intention of becoming a developer yourself.

Key Terms

Layout grid

A set of column guides used to organise a page. Components can span one or several columns.

Gutter

The space between neighbouring columns. Consistent gutters help keep the layout orderly.

Margin

The space between the outside of the column grid and the artboard edges. Left and right margins both reduce the available grid width.

Responsive web design

An approach in which the same website adapts its layout to different screen sizes, rather than simply shrinking the entire page.

Breakpoint

A width threshold where layout behaviour changes, such as cards stacking or navigation becoming more compact.

Square grid

A guide made of evenly sized squares. An eight-pixel square grid can help establish consistent spacing for an app interface.

FAQs

Does a twelve-column grid mean I need twelve items across the page?

No. An item can span several columns. Three equal cards can each span four columns, while four equal cards can each span three.

Should I use four, six or twelve columns for mobile?

Twelve can reflect the underlying framework, while four or six can make the design guides easier to use on a narrow artboard. Choose the useful level of detail and agree how it maps to development.

What gutter width should I use in Adobe XD?

Eight, sixteen and twenty-four pixels are useful starting points. Choose a value that suits the layout and keep it consistent with the spacing system used for the project.

Do I need a separate tablet artboard?

It depends on the brief. Smaller projects may use mobile and desktop references, while larger projects may require tablet and additional sizes. Agree the intermediate behaviour and required artboards with the developer.