0
0
Tailwindmarkup~5 mins

Defining grid columns in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Grid columns help you organize content in neat vertical sections. This makes your webpage look clean and easy to read.

You want to create a photo gallery with equal-sized columns.
You need to arrange product cards side by side on an online store.
You want a blog layout with multiple columns for posts.
You want to build a responsive layout that changes columns on smaller screens.
Syntax
Tailwind
grid grid-cols-{number}

Replace {number} with how many columns you want.

Tailwind uses grid-cols-1 for one column, grid-cols-2 for two, and so on.

Examples
This creates a grid with 2 columns.
Tailwind
<div class="grid grid-cols-2">...</div>
This creates a grid with 4 columns.
Tailwind
<div class="grid grid-cols-4">...</div>
This creates a grid with 1 column, stacking items vertically.
Tailwind
<div class="grid grid-cols-1">...</div>
Sample Program

This example shows a grid with 3 columns and 6 boxes. The boxes have different blue shades and some have white text for contrast. The gap-4 adds space between boxes.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Columns Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Grid with 3 Columns</h1>
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-200 p-4 text-center">Box 1</div>
    <div class="bg-blue-400 p-4 text-center">Box 2</div>
    <div class="bg-blue-600 p-4 text-center">Box 3</div>
    <div class="bg-blue-800 p-4 text-center text-white">Box 4</div>
    <div class="bg-blue-900 p-4 text-center text-white">Box 5</div>
    <div class="bg-blue-700 p-4 text-center text-white">Box 6</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use gap-{size} to add space between grid items for better look.

Grid column widths automatically adjust to screen size, but the number of columns is fixed unless you add responsive classes like sm:grid-cols-2.

Use semantic HTML and add aria-label if grid content needs accessibility help.

Summary

Use grid-cols-{number} to set how many columns your grid has.

Adding gaps between columns makes content easier to see.

Grid layouts help organize content neatly and responsively.