Have you ever struggled to align elements just right on your webpage? Maybe you tried using floats, or even a flexbox, but ran into limitations when it came to building more complex layouts. If that sounds familiar, it’s time to meet the CSS Grid. When building complex layouts on a webpage, CSS grids are the way to go.

The CSS Grid is one of the most powerful layout systems in CSS and programming. It gives developers a simple yet flexible way to design intricate two-dimensional layouts with just a few lines of code. Whether you’re creating a dashboard, a photo gallery, or even a game board, the CSS Grid can save you hours of fiddling and changing x and y values by one pixel every iteration.

In this post, we’ll cover:

What CSS Grid is
When to use it
Core concepts with examples
Real-world use cases
How it compares to Flexbox
A practical example with annotated code
Tips for responsive design

What is CSS Grid?

A CSS Grid Layout, also known as “grid,” is a layout system optimized for building user interfaces in two dimensions: rows and columns. Unlike a Flexbox, which works best for linear, one-dimensional layouts, the Grid gives you control over both axes which makes it ideal for layouts that need structure in both directions.

With Grid, you can:

Define columns and rows using a simple syntax
Automatically place items into a grid without extra markup
Control spacing, alignment, and item sizing
Easily rearrange items with only CSS
Make fully responsive layouts with minimal code

Why Use a CSS Grid?

Some scenarios where The Grid shines:

Photo galleries (with or without gaps)
Card layouts for blogs or e-commerce products
UI dashboards with multiple panels
Sudoku or calendar layouts
Tile-based games like Wordle or Match Master
Interactive content
Split screens and overlapping elements

While at a retro board game place, I saw a game called Rubix Race and as a fan of Rubix Cubes, it piqued my interest. Although the game was very fun to play, moving the tiles often felt clunky, especially for my grandma. I realized this game could really benefit with touchscreen controls on a digital version. Armed with reckless motivation and some knowledge of Flexbox, I got to work…and it wasn’t pretty.

And then I discovered - THE CSS GRID!

With Grid

And it completely overhauled my grid layout and development process. I learned about Grid and implemented it into my game. The layout was a lot better. I was able to design the layout the way I desired and succeeded in finishing the game! As a side note, this is not flexbox slander, flexbox is a very powerful tool but for these kinds of projects, using Grid is the better option. If you’re interested, the game can be found here: https://namishj.github.io/match-master

The code can be found here: https://github.com/NamishJ/match-master#.

Let’s look at a basic example: Let's create a simple 4x4 Grid.

Here’s a simple example of a grid with 16 tiles, similar to a memory game or product grid.

HTML (or JSX in React):

</div>

CSS:

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 400px;
margin: auto;
padding: 16px;
}

.tile {
background-color: #4f46e5;
color: white;
font-size: 1.5rem;
font-weight: bold;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
transition: transform 0.2s ease;
}

.tile:hover {
transform: scale(1.05);
}

Woah that’s a lot of code! What does each part of the code mean?

display: grid turns the container into a grid layout.
grid-template-columns: repeat(4, 1fr) creates four equal-width columns. 1fr stands for "one fraction" of the available space.
gap: 12px adds space between rows and columns.
aspect-ratio: 1 / 1 makes each tile a square, regardless of screen width.
The .tile style centers text and adds a simple hover animation.

This is just scratching the surface! Let's explore more powers of The Grid.

Understanding Grid Terminology

Here are some key concepts you’ll run into:

Grid Container: The parent element with display: grid
Grid Item: A direct child of a grid container
Tracks: Rows and columns
Gaps: Space between rows and/or columns (set with gap)
Line Numbers: Each row/column line is automatically numbered, allowing precise placement of items
Grid Areas: You can give sections names and position them with template-areas
Fractional Units (fr): Let you divide space proportionally

Let’s now look at an example of a responsive grid:

Let’s make our layout responsive using auto-fit and minmax():

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 12px;
padding: 16px;
}

This means The Grid will create as many columns that will fit and each one is at least 100px wide. The size of each column can also grow to fit the available space.

This pattern is great for galleries or cards that need to adapt to screen size.

CSS Grid vs Flexbox

You might be wondering: “I already use Flexbox so why do I need The Grid? When should I use The Grid and when should I use Flexbox?”

Use Flexbox when you are aligning items in a single row or column, when you want equal or dynamic wrapping, and/or you need something centered quickly.

Use The Grid when creating multi row/column layouts, when you want precision and control over the layout structure, when you need vertical and horizontal alignment, and/or when you want clean code.

The Flexbox and The Grid aren’t enemies, they work great together. Use Flexbox inside grid items for internal alignment, for example.

Real-World Use Cases

Here are just a few practical layouts where Grid is incredibly helpful:

Photo Galleries:

.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

Pricing Tables:

.grid {
grid-template-columns: 1fr 1fr 1fr;
}

Game Boards (like 2048 or Sudoku):

.grid {
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
}

Responsive Cards:

.grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Pro Tips

Use grid-auto-rows to control row height when only column sizes are defined.
Use media queries or container queries to tweak your grid on smaller screens.
grid-template-areas can make your layout very readable (great for dashboards).
Use DevTools in Chrome or Firefox to visualize your grid layouts.

Conclusion

The CSS Grid might seem intimidating at first, but once you try it, it’ll open up a whole bunch of possibilities for your future projects. It lets you build precise, responsive, and readable layouts with very little and clean code. And when combined with other layout tools like The Flexbox, it becomes even more powerful.

Whether you're working on a portfolio, a web app, a dashboard, or even a game, mastering The Grid will level up your CSS game and programming skills tremendously.

Try it in your next project! Even if it is with something small. See how much cleaner and simpler your layout code becomes. So next time you have an idea for 2048, you know what to do.

Mastering CSS Grid: The Power Tool for Modern Web Layouts

Subscribe to my newsletter

Hack United

Hack United