A Complete Guide to CSS Grid – Everything You Need to Know

CSS Grid Layout is a two-dimensional layout system in CSS. Unlike Flexbox, which handles one direction at a time (row or column), Grid can manage both rows and columns simultaneously, making it perfect for complex, responsive layouts.

What is CSS Grid?

CSS Grid lets you create layouts that were once only possible with complex floats, positioning, or frameworks. It works by defining a grid container and specifying rows and columns where items can be placed.

You start with:

.container {
  display: grid;
}

Every direct child of .container becomes a grid item.

Grid Container Properties

Here are the main properties that you can apply to a grid container:

1. display: grid; / display: inline-grid;

• grid → Creates a block-level grid container.
• inline-grid → Creates an inline-level grid container.

2. grid-template-columns / grid-template-rows

Defines the number and size of columns and rows.

.container {
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 100px auto;
}

• px → fixed size
• fr → fraction of available space
• auto → adjusts to content

3. gap, column-gap, row-gap

Controls spacing between grid items.

.container {
  gap: 20px;
}

4. grid-template-areas

Lets you define named areas for layout.

.container {
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

5. justify-items / align-items

Aligns items within their cells.

Property	Direction
justify-items	Horizontal
align-items	Vertical

6. justify-content / align-content

Aligns the whole grid inside the container.

7. grid-auto-rows / grid-auto-columns

Defines size for rows or columns that are automatically created.

Grid Item Properties

These properties are applied to individual grid items:

1. grid-column / grid-row

Defines where the item starts and ends.

.item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

2. grid-area

Assigns an item to a named area from grid-template-areas.

.item {
  grid-area: header;
}

3. justify-self / align-self

Aligns an individual item inside its grid cell.

Example Layout

Here’s a simple CSS Grid layout:

Header

Sidebar

Main Content

Footer

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px auto 50px;
  gap: 10px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; background: lightblue; }
.sidebar { grid-area: sidebar; background: lightgreen; }
.content { grid-area: content; background: lightyellow; }
.footer { grid-area: footer; background: lightpink; }

Why Use CSS Grid?

• Handles both rows and columns at once
• Perfect for page layouts and dashboards
• Reduces dependency on frameworks like Bootstrap
• Cleaner, more semantic code
• Fully responsive when combined with minmax() and auto-fit

Final Thoughts

CSS Grid is a game-changer for modern web layouts. It offers precise control, reduces code complexity, and works beautifully alongside Flexbox for smaller UI elements.