Master CSS Grid: Layouts That Fit Any Screen

The first time I tried to build a photo gallery with plain CSS, it looked fine on my laptop and fell apart on my phone. Images overlapped, gaps went crooked, and one photo slid under another. I spent an evening adding floats and margins until a friend showed me CSS Grid — and the whole messy layout snapped into place with about five lines of code. Honestly, Grid is the tool I wish someone had shown me on day one, because it turns layout from guesswork into a simple drawing.

What Is CSS Grid?

CSS Grid is a layout system that lets you arrange a web page into rows and columns, like a table you can fully control — except it is made for design, not for data. You tell the browser "give me three columns and two rows", and it places your items into those boxes automatically. No floats, no hacks, no counting pixels by hand. The grid container is the parent element that holds everything, and each child inside it becomes a grid item that sits in one or more of the boxes you defined.

The Main Idea

Most beginners get stuck right here: they try to place every box by hand. Grid works the other way round — you describe the shape of the page first, and the browser does the placing. Think of a chocolate box with dividers. You decide the dividers: three across, two down. Then you drop the chocolates in, and each one lands in its own neat compartment. In my opinion, that shift — describe the grid, not each item — is the whole secret of Grid, and it is why layouts that took me an hour with floats now take ten minutes.

In Simple Words

Here is the whole idea, in four steps:

1. Turn on the grid with display: grid on the container.
2. Draw the columns with grid-template-columns — for example, three equal columns.
3. Draw the rows if you want them, or let the browser make rows as needed.
4. Drop your items in — they fill the boxes in order, left to right, top to bottom.

Let's Build a Photo Gallery, Step by Step

Imagine you have six holiday photos and you want them in three neat columns. Here is the HTML — just a container and six items:

<div class="gallery">
  <img src="photo1.jpg" alt="Beach">
  <img src="photo2.jpg" alt="Mountains">
  <img src="photo3.jpg" alt="City">
  <img src="photo4.jpg" alt="Forest">
  <img src="photo5.jpg" alt="Desert">
  <img src="photo6.jpg" alt="Lake">
</div>

Now the CSS that does the magic:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

Watch what happens, step by step. First, display: grid switches the container into grid mode. Then repeat(3, 1fr) draws three equal columns — 1fr means "one fraction of the free space", so each column gets exactly a third. Finally, gap: 12px leaves a tidy 12-pixel space between every photo. The six photos fill the grid by themselves: photos 1–3 on top, photos 4–6 below. Nothing overlaps, nothing needs a width.

Now the fun part. Say photo 1 is your favourite and you want it twice as wide. One line does it:

.gallery img:first-child {
  grid-column: span 2;
}

Photo 1 now stretches across two columns, and the other photos shuffle along to fill the space — photo 2 and 3 sit beside it in row one, and the rest flow down. That is the power of Grid: you move one item, and the whole layout rearranges itself. If you have already played with CSS Flexbox, think of it this way — Flexbox lines things up in one direction, while Grid controls rows and columns at the same time. I recommend Grid whenever your layout looks like a table, and Flexbox when it looks like a single row or column.

Grid vs Flexbox: Which One Wins?

Beginners always ask me this, and honestly there is no single winner — they are teammates. Here is how I decide:

Situation	Use this	Why
Photo gallery, cards, dashboard	CSS Grid	Two-dimensional — rows and columns together
Navbar, buttons in a row	Flexbox	One-dimensional — a simple line of items
Whole page layout	CSS Grid	Header, sidebar and content in one grid
Centring one thing	Flexbox	Quicker for a single row or column

One more honest tip: do not learn Grid from a cheat sheet alone. Open your browser's developer tools, hover over a grid, and watch the browser draw the lines for you — seeing your columns light up makes the whole thing click. Once your layout works, the next step is to put your website online so the world can see it, and if you are still building your first pages, start with your first website with HTML and CSS.

Two Traps Every Beginner Hits

First trap: forgetting that 1fr shares only the free space. If one photo is huge and the others are small, the columns still stay equal — the big photo just gets squeezed. Set a width on your images, or use object-fit: cover. Second trap: using Grid for everything. A single row of buttons does not need a grid; Flexbox is simpler there, and simpler code means fewer bugs. I use Grid for the page skeleton and Flexbox for the small stuff inside it.

Test Your Understanding

Quiz: You have a gallery with grid-template-columns: repeat(3, 1fr) and six photos. What does grid-column: span 2 on the first photo do?

1. It deletes the first photo
2. It makes the first photo span two columns, and the others rearrange
3. It makes all photos twice as wide
4. It adds two extra columns to the grid

Answer: B. The first photo stretches across two columns, and the remaining photos flow around it. If you picked D, remember: span 2 uses the columns that already exist — it never creates new ones.

Conclusion

CSS Grid turns layout into a drawing: describe the rows and columns, drop your content in, and let the browser do the arranging. Open your editor right now and rebuild a page you made with floats or margins — a gallery, a card row, anything — with three lines of Grid. When it snaps into place on the first try, you will feel what I felt that evening: layout is not hard, I was just using the wrong tool.

Related Articles

• CSS Flexbox Magic: Layouts Made Easy
• Build Your First Website: HTML & CSS Basics for Complete Beginners
• How to Put Your Website Online: A Beginner's Guide to Web Hosting