Beyond Columns: Making Sense of Grids

You’ve just landed your first freelance gig or been given the responsibility to lead a new project at work. There’s excitement, but also that moment of uncertainty. How do you start? What grid system should you use? How many columns should your grid have? What about margins and gutters? And most importantly, what size screen should you be designing for?

If you're like many new designers, you might be tempted to default to the tried-and-true 12-column grid, the one you learned in your bootcamp or that you’ve used in the past. 

But as soon as you start your project, more questions arise: Is the 12-column grid the best choice? How do you determine the margins and gutters? What size should each column be? The options can feel overwhelming, but this is a key moment where understanding grids will set you apart as a designer.

The Importance of Grids 

Grids are the backbone of a well-structured design. They ensure consistency, balance, and alignment across the entire layout. When done right, grids make your design feel polished and cohesive, helping guide the user’s eyes through the content in a logical and visually pleasing way. Using a grid not only streamlines your workflow but also supports better spacing, readability, and organization. 

Choosing the right grid isn’t just about getting your columns in place. It’s about making intentional decisions that support your content, reflect your goals, and give your design the flexibility it needs. Understanding grids and knowing how to adjust them will set you up for success. 

How Do You Choose the Right Grid? 

Now, let’s tackle the question: How do you choose the right grid? Here are some things to consider: 

  • What is the project? Are you working on a simple website or a more complex app with multiple components? The project's complexity will influence the number of columns and the grid layout. 

  • What’s the screen size? You’ll need to consider both mobile-first and desktop sizes. Think about the smallest device (the baseline) and the largest device your design will be viewed on.

  • What’s the content? Is your design more visual, with lots of images, or more text-heavy? The type of content will determine the number of columns and their size.

What is your flexibility? You don’t always have to default to the 12-column grid. It’s great for general purposes, but other grids might offer more flexibility for specific project needs.

Stretch, Center, Left, Right: What's the Difference?

Once you've decided on the number of columns, you'll need to figure out the alignment of your grid. Here are some key questions to ask yourself: 

  • Should the grid stretch to fit the screen? This is great for responsive designs. 
  • Should it stay centered? A centered grid can give your layout more breathing room on wider screens.
  • Should it align to the left or right? These alignments are often used in content-heavy layouts or for specific design choices. 

Don’t worry if you’re not sure which one to choose. We’ll dive into when and why to use each of these alignments- center, stretch, left, or right- in an upcoming post.

But before you align anything, there’s one foundational decision that affects everything: your frame size. It’s the often-overlooked starting point that sets your grid up for success, and it’s exactly what we’ll cover in the next post.


Helping UX Designers bridge gaps and grow

Comments

Post a Comment

Popular posts from this blog

Margins and Gutters: Spacing That Brings Your Grid to Life

Image
When it comes to grid-based design, margins and gutters are often the unsung heroes. While columns define where your content sits, margins and gutters define how your content breathes and interacts within that space. They create the invisible structure that guides the eye and helps users understand the hierarchy and flow of information. Understanding how to size and justify these values is a key part of designing flexible, readable layouts, especially when you’re building across multiple screen sizes. “Eyeballing it” won’t cut it when a stakeholder asks why your spacing feels off. You should be able to explain why you chose the numbers you did, and that’s what this post is all about. What Are Margins and Gutters? Gutters are the spaces between columns. They keep content from feeling cramped and ensure text and images don’t run into each other. Margins are the space on the outer edges of the grid. They keep content from hugging the edges of the screen and give your layout room to brea...
Read more

Is Your Case Study a Barrier or a Breakthrough?

You’ve sent out applications for every role you feel qualified for. You’ve tapped your network — friends, mentors, anyone rooting for you. But the responses are the same: silence or “no.” The job market feels tighter than ever, and every application seems to vanish into a black hole. Time feels frozen, and with each passing day, your projects start to feel outdated. The pressure builds. Self-doubt creeps in. Imposter syndrome piles on. Then one day, you ask a trusted friend, not a recruiter, but someone who knows what a strong case study should communicate, to review your portfolio. Their questions sting. They don’t understand your choices, your reasoning, or how you moved from point A to point B. That’s when it clicks. Your case study isn’t telling a story. It’s just a list of steps. Surface-level. You go back and revise. You add context, reasoning, validation, and the connections between your actions and outcomes. It’s not an overnight miracle — you don’t land a job the next day — b...
Read more

The Art of Interviewing

Today’s the day. You’ve been designing for a year or two, with a couple of projects under your belt, but it’s been a while since you’ve done an interview. Your questions are solid, shared with colleagues, refined follow-ups, yes/no paths mapped out, but you know, real people rarely follow a script. Excited and a little nervous, you take a deep breath and get ready for four conversations on the same topic. The first participant is quiet and hesitant. They avoid eye contact, offer one-word answers, and pause before speaking. You slow down, soften your tone, and let the silence settle just long enough to give them space. “Can you tell me a little bit more about that?” you ask. Gradually, their posture eases, their words lengthen. That small act of checking in, paying attention to their comfort, turns the conversation around. The next participant couldn’t be more different, enthusiastic, animated, and easily sidetracked. They bounce from one story to another, and you ride the wave, listen...
Read more