HtmlHow-ToBeginner · 4 min read

How to Create Grid Layout in HTML: Simple Guide

To create a grid layout in HTML, use CSS Grid by applying display: grid; to a container element and define rows and columns with grid-template-columns and grid-template-rows. Place child elements inside this container to arrange them in the grid.

📐

Syntax

Use CSS Grid by setting display: grid; on a container. Define the number and size of columns with grid-template-columns and rows with grid-template-rows. Child elements automatically fill the grid cells.

display: grid; - activates grid layout
grid-template-columns - sets column sizes
grid-template-rows - sets row sizes

css

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

💻

Example

This example shows a simple 3-column, 2-row grid layout with colored boxes 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.0">
<title>Grid Layout Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    background-color: #eee;
    padding: 10px;
  }
  .box {
    background-color: #4CAF50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
  }
</style>
</head>
<body>
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
</body>
</html>

Output

A light gray rectangular area with 6 green boxes arranged in 3 columns and 2 rows, each box labeled 1 to 6, spaced evenly with gaps.

⚠️

Common Pitfalls

Common mistakes when creating grid layouts 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 gaps, causing elements to stick together.
Placing grid items outside the defined grid area by mistake.

css

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

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

📊

Quick Reference

Property	Description	Example
display	Defines the container as grid	display: grid;
grid-template-columns	Sets column sizes	grid-template-columns: 100px 1fr 2fr;
grid-template-rows	Sets row sizes	grid-template-rows: 50px 100px;
gap	Sets space between grid items	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 a grid layout.

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

Add gap to create space between grid items for better visuals.

Grid items automatically fill grid cells unless positioned explicitly.

Always check that grid properties are applied to the container, not the items.