Table of contents
Grid Layout
Tailwind CSS provides a comprehensive set of utilities for working with CSS Grid layout. You can use the grid prefix to create grid-related classes, and the gap prefix to create classes for setting the gap between grid items. Here are some examples of how to use the grid and gap utilities in Tailwind:
- Creating a grid container:
htmlCopy code<div class="grid grid-cols-3">
<div class="bg-gray-200 p-4">1</div>
<div class="bg-gray-300 p-4">2</div>
<div class="bg-gray-400 p-4">3</div>
<div class="bg-gray-500 p-4">4</div>
<div class="bg-gray-600 p-4">5</div>
<div class="bg-gray-700 p-4">6</div>
</div>
In this example, the grid class creates a grid container with three columns. The child div elements are automatically placed into the grid in the order that they appear in the HTML.
- Setting the gap between grid items:
htmlCopy code<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-200 p-4">1</div>
<div class="bg-gray-300 p-4">2</div>
<div class="bg-gray-400 p-4">3</div>
<div class="bg-gray-500 p-4">4</div>
<div class="bg-gray-600 p-4">5</div>
<div class="bg-gray-700 p-4">6</div>
</div>
In this example, the gap-4 class sets a gap of 1rem between grid items.
- Creating a grid with a fixed width:
htmlCopy code<div class="grid grid-cols-3 gap-4 max-w-screen-lg mx-auto">
<div class="bg-gray-200 p-4">1</div>
<div class="bg-gray-300 p-4">2</div>
<div class="bg-gray-400 p-4">3</div>
<div class="bg-gray-500 p-4">4</div>
<div class="bg-gray-600 p-4">5</div>
<div class="bg-gray-700 p-4">6</div>
</div>
In this example, the max-w-screen-lg and mx-auto classes set a maximum width for the grid container and center it horizontally on the page.
Tailwind CSS also provides many other grid-related utilities, such as classes for controlling grid column spans, row spans, and alignment.