CSS Grid Explained with Simple Examples

Originally published on CodingCush.

CSS Grid is a layout system built into CSS that lets you place items in rows and columns at the same time. You turn a parent element into a grid container with display: grid, define the columns and rows, add spacing with gap, and the browser lines everything up for you. In this guide you will learn the core ideas step by step, build a complete card gallery you can copy, and see when Grid beats Flexbox.

What Is a Grid Container?

Every grid starts with a container. Pick the element that wraps your items, a div, a section or a main element, and set display: grid on it. That one line changes how its direct children behave. The children become grid items, and the container controls where they sit.

Think of it like a spreadsheet. Columns run down, rows run across, and each item sits in a cell where a row and a column meet. Lines are the borders between cells, and tracks are the rows and columns themselves. You describe the spreadsheet, and the browser builds it.

If you are still sorting out which language does what on a page, our guide to the difference between HTML, CSS and JavaScript is a friendly place to start. HTML gives the structure, CSS, including Grid, gives the layout.

The MDN guide to the basic concepts of grid layout explains containers, items, lines and tracks in detail, and it is worth bookmarking as you practise.

Step 1: Create Your First Grid

Start with simple HTML and one CSS rule:

<div class="box"> <div>One</div> <div>Two</div> <div>Three</div> </div> .box { display: grid; } 

That is a real grid already. With no columns defined, Grid creates one column and stacks the three items in three rows. The magic starts when you describe the columns and rows yourself.

Step 2: Define Columns and Rows

Two properties do most of the work. grid-template-columns sets how many columns there are and how wide each one is. grid-template-rows does the same job for rows.

.box { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; } 

This says: make three columns, each 200 pixels wide, and two rows, each 100 pixels tall. Six items fill it perfectly. A seventh item creates a new row automatically, which is handy and also a common surprise.

Fixed sizes are clear, but they do not adapt to different screens. That is why Grid has a unit made just for this job.

Step 3: Meet the fr Unit

The fr unit means one fraction of the free space. It is Grid only, and it makes columns share space fairly without any maths from you.

grid-template-columns: 1fr 1fr 1fr; 

Here the free space is split into three equal parts. Change it to 2fr 1fr and the first column gets twice the share of the second. It is like slicing a cake where one guest politely, and correctly, gets a bigger slice.

Writing the same value again and again gets dull, so use repeat():

grid-template-columns: repeat(3, 1fr); 

That line means the same as 1fr 1fr 1fr, but it is shorter and easier to change. The full MDN CSS grid layout reference lists every Grid property you will meet as you grow.

Step 4: Add Space with gap

Items that touch each other look cramped. The gap property adds space between rows and columns, and only between them, never around the outside edge.

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

One value sets both gaps. Two values set them separately: gap: 24px 16px means 24 pixels between rows and 16 between columns. Before gap, developers used margins and fixed the extra edge space by hand. Grid skips that headache.

Terminal style code listing for this article: the gallery CSS rules, the verified check on the test file, and the layout measurements for a 900 pixel container.

Step 5: Place Items with grid-column

By default, each item takes one cell and they flow in order. Sometimes one item deserves more room, like a featured card at the top of a gallery. Use grid-column on that item:

.featured { grid-column: span 2; } 

span 2 means this item stretches across two columns. You can also name exact lines: grid-column: 1 / 3 means start at line 1 and end at line 3, the same width. Beginners usually find span easier, so start there. The row version is grid-row.

Good structure helps Grid too. Using meaningful elements for your sections and cards, as covered in our guide to HTML semantic tags explained with examples, keeps your markup clear while Grid handles the visual placement.

Step 6: A Complete Card Gallery You Can Copy

Now put it all together. This is the exact example tested for this article. It builds a gallery with a wide featured card and four normal cards:

<div class="gallery"> <article class="card featured"> <h2>Featured</h2><p>Wide card.</p> </article> <article class="card"><h2>Card 2</h2><p>Normal card.</p></article> <article class="card"><h2>Card 3</h2><p>Normal card.</p></article> <article class="card"><h2>Card 4</h2><p>Normal card.</p></article> <article class="card"><h2>Card 5</h2><p>Normal card.</p></article> </div> .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; } .card { background: #eef6ff; padding: 20px; border-radius: 8px; } .featured { grid-column: span 2; } 

Here is what happens. The gallery has three equal columns. In a 900 pixel container, each column is 289.33 pixels wide, because the two 16 pixel gaps use 32 pixels first: (900 minus 32) divided by 3. The featured card spans two columns, so it is 594.67 pixels wide. Row one holds the featured card and Card 2. Row two holds Cards 3, 4 and 5. No floats and no extra wrapper divs.

We verified this example in a standalone HTML file: the CSS braces were balanced, all the Grid properties were present, and the five article elements were correctly opened and closed. Try changing repeat(3, 1fr) to repeat(2, 1fr) and watch the gallery rebuild into two columns.

Grid vs Flexbox: Which One Should You Use?

Grid and Flexbox are friends, not rivals. Flexbox lays items out in one direction, a row or a column. Grid works in two directions at once. If you know the shape of the whole page, Grid usually wins. For a line of items that should wrap and centre, Flexbox is often simpler. Our companion guide to CSS Flexbox explained with simple examples covers that case in the same style.

A common pattern is Grid for the page and Flexbox inside each card.

Common Mistakes and Troubleshooting

Putting display: grid on the wrong element. Grid only controls direct children. If your cards are wrapped in extra divs, the wrapper becomes the item, not the card. Check your HTML nesting first.

Expecting gap around the outside. gap adds space only between tracks. If you want space around the whole grid, add padding to the container.

Confusing columns and rows. grid-template-columns controls widths as you read across. If your layout looks rotated, you probably swapped the two template properties.

Fixed sizes that overflow small screens. Three 200 pixel columns need at least 600 pixels plus gaps. On a phone that overflows. Prefer fr units for flexible columns, and test at a narrow width.

Forgetting that extra items create new rows. Grid adds rows for items you did not plan for. Check your item count when a layout looks taller than expected.

Frequently Asked Questions

Is CSS Grid hard for beginners?

No. Start with display: grid, grid-template-columns and gap. Those three alone build most beginner layouts, and the rest can wait.

What does 1fr mean in Grid?

It means one fraction of the free space left after fixed sizes and gaps are taken away. Three columns of 1fr share that space equally.

Should I learn Grid or Flexbox first?

Learn Flexbox basics first if you mainly centre items and build menus, then learn Grid for full page layouts. In practice you will use both together.

Does Grid work in all modern browsers?

Yes. Grid is supported in all modern browsers, including Chrome, Firefox, Safari and Edge, so the examples in this article are safe to use today.

How do I make a grid item span two rows?

Use grid-row: span 2 on that item, in the same way grid-column: span 2 spans two columns.

Conclusion

Grid stops being scary once you see it as a described spreadsheet: a container, columns and rows you define, fr units that share space fairly, gap for breathing room, and grid-column when one item needs more space. Copy the gallery, change the numbers, and break it on purpose.