Grid in CSS is a layout system for building rows and columns at the same time. It is designed for two-dimensional layout. That makes it useful for page shells, card grids, dashboards, galleries, feature sections, pricing tables, and any layout where horizontal and vertical placement both matter.
CSS Grid does not replace flexbox. It solves a different class of layout problems. Flexbox is excellent for arranging items in one direction. Grid is better when the layout needs columns and rows together. Modern CSS projects commonly use both.
Creating a Grid Container
A grid starts with display: grid. The element becomes a grid container and its direct children become grid items. Then columns, rows, and gaps can be defined on the container.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}This creates three equal columns with space between them. Each direct child of .card-grid becomes a grid item and flows into the grid cells automatically.
Grid Columns and Rows
The properties grid-template-columns and grid-template-rows define the grid structure. Columns are usually defined more often because content height is commonly allowed to grow naturally.
.layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
}This layout has a fixed sidebar column and a flexible main column. The rows can represent header, content, and footer areas. The 1fr unit takes available space.
The fr Unit
The fr unit means a fraction of available space. It is one of the most useful parts of CSS Grid because it lets columns share leftover space without manual percentage math.
.three-columns {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}The middle column receives twice as much available space as each side column. This is easier to maintain than calculating percentages manually.
repeat() Function
The repeat() function avoids repeating the same column value again and again. It is commonly used for equal card grids.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}This creates four equal columns. If the number changes later, only one number needs to be edited.
gap in CSS Grid
The gap property controls spacing between grid rows and columns. It replaces older margin-based spacing tricks and keeps layout spacing on the parent container.
.dashboard {
display: grid;
gap: 24px;
}You can also use row-gap and column-gap when vertical and horizontal spacing should be different.
Responsive Grid with minmax()
The minmax() function defines a minimum and maximum track size. Combined with repeat() and auto-fit, it creates responsive grids without many media queries.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}Each card gets at least 240px. If more space exists, cards stretch evenly. If space becomes too small, the grid automatically moves items to fewer columns. This pattern is useful for blogs, product grids, portfolios, and course cards.
auto-fit vs auto-fill
Both auto-fit and auto-fill create as many tracks as can fit. The difference appears when there is extra space. auto-fit collapses empty tracks, while auto-fill keeps them.
| Value | Behavior |
|---|---|
| auto-fit | collapses empty tracks and stretches filled tracks |
| auto-fill | keeps empty tracks in the grid |
| minmax(240px, 1fr) | sets a minimum size and flexible maximum |
For most responsive card grids, auto-fit feels natural because the existing cards stretch to fill the row.
Placing Grid Items
Grid items can be placed using line numbers. The properties grid-column and grid-row control where an item starts and ends.
.featured-card {
grid-column: span 2;
}This item spans two columns. It is useful for featured posts, large dashboard cards, or promotional blocks inside a grid.
Grid Template Areas
Grid template areas allow layout regions to be named. This makes page layouts easier to read because the CSS describes the visual structure.
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 260px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }This gives each major region a name. It is easier to understand than only using line numbers, especially for page shells and admin dashboards.
Grid Auto Placement
If grid item positions are not manually defined, CSS Grid places items automatically. It fills cells based on source order and available tracks. This is useful because many grids do not need manual item placement at all.
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}Every product card flows into the next available grid cell. The HTML remains simple and the CSS controls the layout.
Grid Alignment
CSS Grid supports alignment properties such as justify-items, align-items, place-items, justify-content, and align-content. These control item alignment inside cells and track alignment inside the container.
.icon-grid {
display: grid;
place-items: center;
}The place-items shorthand centers items horizontally and vertically inside their grid cells. It is a clean way to center icons, badges, empty states, and compact UI elements.
Grid vs Flexbox
Use grid when the layout needs rows and columns together. Use flexbox when the layout primarily flows in one direction. A card layout may use grid for the outer card arrangement and flexbox inside each card for button alignment.
| Need | Better Choice |
|---|---|
| Page shell | Grid |
| Responsive card layout | Grid |
| Navigation bar | Flexbox |
| Button row | Flexbox |
| Card internal spacing | Flexbox |
Implicit Grid
An explicit grid is created by grid-template-columns and grid-template-rows. But CSS Grid can also create implicit rows or columns when there are more items than defined cells. This is called the implicit grid.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(180px, auto);
}Here, columns are explicit, but extra rows are created automatically as more cards are added. grid-auto-rows controls the size of those automatic rows.
grid-auto-flow
The grid-auto-flow property controls how auto-placed items flow into the grid. The default is row flow. The value dense can fill smaller gaps when items have different spans.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
}Dense packing can make galleries look tighter, but it may visually reorder items. Use it carefully when source order matters, such as tutorials, ranked lists, or content that should be read in sequence.
Named Grid Lines
Grid lines can be named to make placement more readable. This is useful in larger layouts where line numbers become hard to understand.
.layout {
display: grid;
grid-template-columns:
[sidebar-start] 260px
[sidebar-end content-start] 1fr
[content-end];
}
.main {
grid-column: content-start / content-end;
}Named lines make the layout more self-documenting. Instead of remembering that the main content starts at line 2 and ends at line 3, the CSS uses meaningful names.
Grid for Holy Grail Layout
CSS Grid is excellent for classic page layouts with a header, footer, main content, and sidebars. Older CSS needed floats or positioning for this. Grid expresses it directly.
.site-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}The sidebar can stay fixed in width while the main content gets remaining space. The minmax(0, 1fr) pattern prevents long content from forcing the main column wider than the available area.
Grid for Dashboard Cards
Dashboards often have cards with different importance. Some cards should be normal size, while one or two cards should span more columns. CSS Grid handles this without changing the HTML into complicated row wrappers.
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.stat-card {
grid-column: span 3;
}
.chart-card {
grid-column: span 6;
}This creates a twelve-column system. Small statistic cards can span three columns, while chart cards can span six. On smaller screens, media queries can change every card to span all twelve columns.
@media (max-width: 800px) {
.stat-card,
.chart-card {
grid-column: 1 / -1;
}
}The result is a layout that feels structured on desktop and readable on mobile. This is much cleaner than trying to force a dashboard layout with floats or percentage widths.
When Not to Use Grid
Grid is powerful, but it is not always the simplest answer. If the layout is only a row of buttons, a navigation menu, or a small inline group, flexbox is usually easier. If the content is just normal text flow, neither grid nor flexbox may be needed.
Use grid when the layout needs track control, consistent columns, explicit regions, or automatic responsive card placement. Choosing grid only because it is modern can make simple CSS harder than necessary.
When debugging grid, inspect the grid overlay in browser developer tools. It shows column lines, row lines, gaps, and item placement, which makes grid problems much easier to see than guessing from the CSS alone.
Also check whether the overflowing content needs minmax(0, 1fr) instead of plain 1fr. This small change can prevent wide content from breaking the grid.
That pattern is especially useful for dashboards, tables, and code-heavy cards.
Practical Grid Checklist
- Use grid when rows and columns both matter.
- Use gap on the container for spacing.
- Use fr units for flexible available space.
- Use minmax() for responsive cards.
- Use template areas for readable page shells.
- Use auto placement unless manual placement is truly needed.
- Check direct children because only they become grid items.
Common Grid Mistakes
- Using grid for a simple one-row alignment where flexbox is easier.
- Forgetting gap and adding fragile margins to every item.
- Using fixed columns that break on small screens.
- Overusing manual placement when auto placement is enough.
- Confusing align-items with align-content.
- Forgetting that only direct children become grid items.
Grid in CSS FAQ
What is CSS Grid?
CSS Grid is a two-dimensional layout system for creating rows and columns in CSS.
When should I use grid?
Use grid for page layouts, card grids, galleries, dashboards, and layouts that need rows and columns together.
What does 1fr mean in CSS Grid?
1fr means one fraction of available space inside the grid container.
Is grid better than flexbox?
Grid is better for two-dimensional layout, while flexbox is better for one-dimensional layout. Both are useful.
Continue learning CSS in order
Follow the topic sequence with the previous and next lesson.