If you have ever looked at a modern website and wondered how developers manage to arrange dozens of cards, images, products, buttons, and sections so neatly, there is a good chance CSS Grid is part of the answer.
At first glance, CSS Grid can look complicated.
You may come across properties such as grid-template-columns, grid-column, grid-row, gap, and grid-template-rows and wonder:
"Do I really need to understand all of these?"
The good news is that you don't need to memorize dozens of CSS properties before you can start using Grid.
Once you understand the basic idea behind containers, items, rows, columns, and spacing, CSS Grid becomes much easier to work with.
In this guide, we'll break down CSS Grid from the beginning and explore how you can use it to create practical website layouts.
What Is CSS Grid?
CSS Grid is a two-dimensional CSS layout system used to arrange elements into rows and columns.
The phrase "two-dimensional" is important.
With Grid, you can control both:
- The horizontal arrangement of elements through columns
- The vertical arrangement of elements through rows
This makes Grid particularly useful when you're working with layouts where multiple elements need to line up across both directions.
For example, imagine an online store with products arranged like this:
Product 1 Product 2 Product 3
Product 4 Product 5 Product 6
Or an image gallery:
Image 1 Image 2 Image 3
Image 4 Image 5 Image 6
CSS Grid gives you tools for creating layouts like these without manually positioning every element.
Understanding the Grid Container
Before you can use most Grid properties, you need a grid container.
A grid container is simply the parent element on which you apply:
.container {
display: grid;
}
For example:
Item 1
Item 2
Item 3
Item 4
Then:
.container {
display: grid;
}
The .container becomes the grid container.
The direct children inside it become grid items.
So remember:
Parent = Grid Container
Direct Children = Grid Items
This parent-and-child relationship is one of the first concepts you should understand when learning CSS Grid.
What Are Grid Items?
Grid items are the direct children of the grid container.
Using our previous example:
Item 1
Item 2
Item 3
The .container is the grid container.
The three <div> elements are grid items.
Once the parent has:
display: grid;
CSS Grid can control how those items are arranged.
Rows and Columns: The Foundation of CSS Grid
Think of a spreadsheet.
It has:
- Rows
- Columns
- Cells
CSS Grid works with a similar concept.
A row runs horizontally.
A column runs vertically.
For example:
Column 1 Column 2 Column 3
Item 1 Item 2 Item 3
Item 4 Item 5 Item 6
This structure gives you control over where elements appear.
Instead of simply allowing elements to flow naturally down the page, you can create a structured layout.
Creating Columns With grid-template-columns
One of the most important Grid properties beginners should learn is:
grid-template-columns
It allows you to define the columns in your grid.
For example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This creates three columns.
The fr unit means fraction of the available space.
So:
1fr 1fr 1fr
creates three equal columns.
You can visualize it like this:
| 1fr | 1fr | 1fr |
Each column receives an equal share of the available space.
What If You Want Two Columns?
That's simple.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
Now you have two equal columns.
| 1fr | 1fr |
This can be useful for layouts such as:
- Two-column sections
- Content and sidebar layouts
- Image and text sections
- Two-column forms
Columns Don't Have to Be Equal
You can also give columns different proportions.
For example:
.container {
grid-template-columns: 2fr 1fr;
}
This creates two columns where the first column receives twice the available fractional space of the second.
Think of it as:
| 2fr | 1fr |
This can be useful for a main-content-and-sidebar layout.
Understanding gap
Once you create your grid, you may notice that the items are very close together.
That's where the gap property becomes useful.
For example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
The gap creates consistent spacing between the grid items.
Instead of adding margins individually to every card, you can control the spacing from the grid container.
For example:
Card 1 Card 2 Card 3
↑ ↑
consistent spacing
You can also use different row and column gaps when needed:
.container {
row-gap: 20px;
column-gap: 30px;
}
This gives you separate control over vertical and horizontal spacing.
Understanding grid-column
Now we get to one of the more interesting parts of CSS Grid.
Sometimes you don't want every item to occupy just one column.
You might want an item to stretch across two or more columns.
That's where:
grid-column
comes in.
For example:
.featured {
grid-column: span 2;
}
This tells the grid item to span across two columns.
Imagine a card layout:
| Featured Card |
| Card 2 | Card 3 | Card 4 |
The featured card can occupy more horizontal space than the other cards.
This is useful for:
- Featured products
- Highlighted content
- Dashboard widgets
- Promotional sections
- Magazine-style layouts
Understanding grid-row
The same idea applies vertically.
You can use:
grid-row
to control how many rows an item spans.
For example:
.featured {
grid-row: span 2;
}
The item can now extend across two grid rows.
This becomes especially useful when building more complex layouts.
A Simple CSS Grid Example
Let's put several concepts together.
HTML:
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
CSS:
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
The result is a simple three-column product grid.
Product 1 Product 2 Product 3
Product 4 Product 5 Product 6
Notice how little CSS is required to create the basic structure.
That's one of the reasons CSS Grid is so useful.
CSS Grid for Image Galleries
Image galleries are a great example of where Grid can be useful.
Imagine you have several photographs that need to be displayed in an organized layout.
You could create:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
Now the images can be arranged into three columns.
You can also make selected images larger.
For example:
.gallery img:first-child {
grid-column: span 2;
}
This allows the first image to occupy two columns.
You can create layouts that look more dynamic without manually positioning every image.
CSS Grid for Product Layouts
Online stores often need to display many products.
A product grid might look like:
Product A Product B Product C
Product D Product E Product F
Product G Product H Product I
CSS Grid makes this type of layout straightforward.
For example:
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
Each product can then become a grid item.
This is useful for:
- Clothing stores
- Electronics stores
- Furniture websites
- Bookstores
- Food delivery websites
- Online marketplaces
CSS Grid for Dashboards
Dashboards often contain different types of information:
- Statistics
- Charts
- Notifications
- Tables
- Recent activity
- Reports
Grid can help organize these different components.
For example:
| Statistics | Statistics | Notifications |
| Chart | Chart | Activity |
| Table |
Some dashboard components may span multiple columns or rows.
That's where properties such as grid-column and grid-row become particularly useful.
CSS Grid for Card Layouts
Cards appear everywhere on the web.
You might see them on:
- Blogs
- Portfolio websites
- Business websites
- Learning platforms
- E-commerce sites
- News websites
Instead of manually positioning each card, you can create a grid container.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Then each card becomes a grid item.
This creates a clean and predictable layout.
CSS Grid for Page Sections
Grid isn't only useful for cards.
You can also use it to structure larger sections of a website.
For example:
| Sidebar | Main Content |
| Sidebar | Main Content |
| Sidebar | Main Content |
Or:
| Header |
| Sidebar | Content |
| Footer |
The exact structure depends on the design you're trying to create.
CSS Grid vs Flexbox
If you're learning CSS, you will eventually ask:
"When should I use Grid and when should I use Flexbox?"
A simple way to remember the distinction is:
Flexbox = primarily one-dimensional layouts
Grid = two-dimensional layouts
Flexbox is excellent when you're arranging items along one main axis.
For example:
Button 1 Button 2 Button 3
Grid becomes particularly useful when you need control over both rows and columns.
For example:
Card 1 Card 2 Card 3
Card 4 Card 5 Card 6
However, this doesn't mean you have to choose only one.
Modern websites often use both Grid and Flexbox.
You might use Grid to create the overall page structure and Flexbox inside individual components.
A Common Beginner Mistake
One mistake beginners make is trying to position everything manually.
They may start adding lots of:
margin-left
margin-top
position: absolute
just to make elements appear in particular places.
Sometimes those properties have legitimate uses, but they shouldn't be your first solution for creating a normal page layout.
CSS Grid and Flexbox exist specifically to help developers create structured layouts.
Instead of asking:
"How do I force this element into this exact position?"
Try asking:
"What layout system should organize these elements?"
That shift in thinking can make CSS much easier.
Making CSS Grid Responsive
A layout that looks good on a large screen might not work well on a smaller screen.
Imagine displaying three product columns on a phone.
The cards could become too narrow.
That's why responsive design matters.
You can change the number of columns at different screen sizes.
For example:
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.products {
grid-template-columns: 1fr;
}
}
On larger screens, the products can appear in three columns.
On smaller screens, they can switch to one column.
This is one of the reasons learning Grid together with responsive design is valuable.
Don't Try to Memorize Everything
When you're new to CSS Grid, it can be tempting to memorize every property.
You don't need to.
Start with the concepts you will use frequently:
- display: grid
Turns an element into a grid container.
- grid-template-columns
Defines your columns.
- grid-template-rows
Defines your rows when you need explicit row sizing.
- gap
Creates spacing between grid tracks.
- grid-column
Controls an item's column placement or span.
- grid-row
Controls an item's row placement or span.
Once these concepts become comfortable, you can gradually explore more advanced Grid features.
A Simple Learning Exercise
If you're learning CSS Grid right now, don't just read about it.
Build something.
Try creating a simple product grid.
Start with six cards:
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Then create three columns:
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Next, experiment.
Try:
- Two columns
- Four columns
- Different gaps
- A featured card spanning two columns
- Different row sizes
- A mobile layout
Don't worry if you break something.
Breaking your CSS and figuring out why it broke is part of learning.
The Bigger Picture
CSS Grid is more than a collection of properties to memorize.
It teaches you how to think about layout.
Instead of seeing a webpage as a collection of individual elements, you begin to see relationships:
- Which elements belong together?
- How many columns should this section have?
- Should this item span multiple columns?
- How much space should exist between items?
- What should happen when the screen becomes smaller?
Once you start thinking this way, building layouts becomes much more intentional.
Final Thoughts
CSS Grid can seem intimidating when you first encounter properties like grid-template-columns, grid-column, and grid-row.
But the foundation is actually quite simple.
Remember:
Grid Container → The parent that creates the grid.
Grid Items → The direct children arranged by the grid.
Rows → Horizontal tracks.
Columns→ Vertical tracks.
grid-template-columns→ Defines column structure.
gap → Controls spacing between grid items.
grid-column and grid-row → Control item placement and spanning.
From image galleries and product grids to dashboards and complete page sections, CSS Grid gives developers a powerful way to organize content.
And if you're learning frontend development, don't feel pressured to master everything immediately.
Start with a simple grid.
Create a few cards.
Change the columns.
Adjust the gap.
Make one item span two columns.
Make it responsive.
Experiment.
That's how the concepts move from something you have read about to something you actually understand.
The goal isn't to memorize CSS Grid.
The goal is to understand how to use it to solve layout problems. 💻
What are you learning next: CSS Grid, Flexbox, or responsive design?
Top comments (0)