CssHow-ToBeginner · 3 min read

How to Use CSS Grid: Simple Guide with Examples

Use display: grid; on a container to enable CSS Grid. Define rows and columns with grid-template-columns and grid-template-rows, then place child elements automatically or with grid lines.

📐

Syntax

To use CSS Grid, set display: grid; on a container. Then define the grid structure using grid-template-columns and grid-template-rows. You can specify sizes like fractions (fr), pixels, or percentages. Child items automatically fill the grid cells in order.

Example properties explained:

display: grid; - activates grid layout.
grid-template-columns - sets the number and width of columns.
grid-template-rows - sets the number and height of rows.
gap - adds space between grid cells.

css

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 50px 100px;
  gap: 10px;
}

💻

Example

This example creates a grid with three columns and two rows. The first two columns have fixed widths, and the last column fills the remaining space. The grid items fill cells in order, with gaps between them.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Grid Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 100px 200px 1fr;
    grid-template-rows: 50px 100px;
    gap: 10px;
    background-color: #eee;
    padding: 10px;
  }
  .item {
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 4px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Output

A grid with 3 columns and 2 rows, each cell containing a green box with white numbers 1 to 6, spaced evenly with gaps.

⚠️

Common Pitfalls

Common mistakes when using CSS Grid include:

Forgetting to set display: grid; on the container, so grid properties don't work.
Not defining columns or rows, which results in a single column layout.
Using fixed sizes everywhere, which can break responsiveness.
Ignoring the gap property, leading to cramped layouts.
Trying to place grid items without understanding grid lines or areas.

Always test your grid on different screen sizes to ensure it adapts well.

css

/* Wrong: missing display grid */
.container {
  grid-template-columns: 100px 100px;
}

/* Right: add display grid */
.container {
  display: grid;
  grid-template-columns: 100px 100px;
}

📊

Quick Reference

Property	Description	Example
display	Defines grid container	display: grid;
grid-template-columns	Sets column sizes	grid-template-columns: 1fr 2fr 1fr;
grid-template-rows	Sets row sizes	grid-template-rows: 100px auto;
gap	Sets space between cells	gap: 10px;
grid-column	Positions item horizontally	grid-column: 2 / 4;
grid-row	Positions item vertically	grid-row: 1 / 3;

✅

Key Takeaways

Set display: grid; on a container to start using CSS Grid.

Define columns and rows with grid-template-columns and grid-template-rows.

Use gap to add space between grid cells for better layout.

Grid items fill cells automatically unless positioned explicitly.

Test your grid on different screen sizes for responsiveness.