0
0
Tailwindmarkup~5 mins

Grid container activation in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Grid container activation lets you arrange items in rows and columns easily. It helps organize content neatly on your webpage.

You want to create a photo gallery with rows and columns.
You need to build a layout with header, sidebar, and main content.
You want to align buttons or cards evenly in a grid.
You want a responsive design that changes layout on different screen sizes.
Syntax
Tailwind
grid

Adding grid to a container turns on grid layout.

Use other grid utilities to control rows, columns, and gaps.

Examples
Basic grid container activation. Items inside become grid items.
Tailwind
<div class="grid">...</div>
Grid with 3 columns and space between items.
Tailwind
<div class="grid grid-cols-3 gap-4">...</div>
Grid with 2 rows and 2 columns, with small gaps.
Tailwind
<div class="grid grid-rows-2 grid-cols-2 gap-2">...</div>
Sample Program

This example shows a grid container with 3 columns and gaps between items. Each item has a blue background shade and some padding. The items arrange themselves in rows automatically.

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

Always add grid class to activate grid layout on a container.

Use grid-cols-* or grid-rows-* to set columns or rows count.

Use gap-* classes to add space between grid items for better look.

Summary

Adding grid class activates grid layout on a container.

Grid helps arrange items in rows and columns easily.

Combine with column, row, and gap classes to control layout.