CSS Grid

CSS Grid is a two-dimensional layout system that lets you arrange elements in rows and columns. Unlike Flexbox (which is mainly one-dimensional—either a row or a column), Grid is designed for creating complex page layouts.

Why use CSS Grid?

Grid makes it easy to:

• Create responsive layouts
• Align items precisely
• Build dashboards, galleries, and web page layouts
• Control both horizontal and vertical spacing

1. Making a Grid Container

To use Grid, set the parent element's `display` property to `grid`.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.container {
  display: grid;
}

Now the parent becomes a grid container, and its children become grid items.

2. Creating Columns

Use `grid-template-columns`.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

This creates 3 columns, each 200px wide.

You can also use fractions (`fr`):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

This divides the available space into 4 equal parts:

• First column = 1 part
• Second column = 2 parts
• Third column = 1 part

Example:

|----|--------|----|
 1fr    2fr    1fr

3. Creating Rows

Use `grid-template-rows`.

.container {
  display: grid;
  grid-template-rows: 100px 150px;
}

This creates:

• First row = 100px
• Second row = 150px

4. Gap Between Items

Use `gap`.

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

Example:

+-----+  +-----+  +-----+
|  1  |  |  2  |  |  3  |
+-----+  +-----+  +-----+

5. The repeat() Function

Instead of writing:

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

Write:

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

This means:

• Create 3 columns
• Each is 1 fraction wide

6. Placing Items

You can control where an item appears.

.item1 {
  grid-column: 1 / 3;
}

This means:

• Start at column line 1
• End at column line 3

Example:

+-----------+-------+
|   Item1   |       |
|           |       |
+-----------+-------+

For rows:

.item1 {
  grid-row: 1 / 3;
}

The item spans two rows.

7. Spanning Multiple Columns

.item {
  grid-column: span 2;
}

This item takes up 2 columns.

8. Auto Rows and Columns

If more items are added than you've explicitly defined, Grid creates new rows automatically.

grid-auto-rows: 100px;

Every new row will be 100px tall.

9. Aligning Items

Center items inside their grid cells:

.container {
  justify-items: center;
  align-items: center;
}

• `justify-items` → horizontal alignment
• `align-items` → vertical alignment

Center the entire grid within its container:

.container {
  justify-content: center;
  align-content: center;
}

10. Responsive Grid

A common responsive pattern:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

How it works:

• `auto-fit` automatically creates as many columns as will fit.
• `minmax(200px, 1fr)` makes each column at least 200px wide and allows it to grow to fill available space.

Grid vs. Flexbox