How to create grid container in css

CssHow-ToBeginner · 3 min read

How to Create a Grid Container in CSS: Simple Guide

To create a grid container in CSS, set the container's display property to grid. This enables grid layout, allowing you to define rows and columns inside the container using properties like grid-template-columns and grid-template-rows.

📐

Syntax

Use display: grid; on a container element to turn it into a grid container. Then define the grid structure with properties like grid-template-columns and grid-template-rows.

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.

css

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

💻

Example

This example creates a grid container with three columns and two rows. Each grid item is placed automatically in the grid cells.

html

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

Output

A rectangular area with a light gray background containing six green boxes labeled 1 to 6 arranged in three columns and two rows with spacing between them.

⚠️

Common Pitfalls

Some common mistakes when creating grid containers include:

Forgetting to set display: grid; on the container, so grid properties have no effect.
Not defining columns or rows, which results in a single column layout.
Using fixed sizes without considering responsiveness.
Confusing grid container with grid items; only the container needs display: grid;.

css

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

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

📊

Quick Reference

Property	Description	Example Value
display	Defines the container as grid	grid
grid-template-columns	Sets column sizes and count	100px 200px 100px
grid-template-rows	Sets row sizes and count	50px 100px
gap	Sets space between grid items	10px
justify-items	Aligns items horizontally	center
align-items	Aligns items vertically	center

✅

Key Takeaways

Set display: grid; on the container to create a grid layout.

Use grid-template-columns and grid-template-rows to define the grid structure.

Always define columns or rows to see the grid effect.

Remember grid properties apply only to the container, not the items.

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