How To Use Tailwind CSS Grid?
Last Updated :
12 Sep, 2024
Tailwind CSS can provide a highly customizable and low-level framework to build responsive and dynamic web layouts using the utility-first classes. One of the most powerful layout systems provided by Tailwind is CSS Grid, which allows developers to create complex and flexible grid-based layouts with minimal effort.
Below are the following approaches to use Tailwind CSS Grid:
1. Basic Grid Layout
The basic grid layout can use the grid class to define the container as a grid, and grid-cols-* classes to specify the number of the columns. This is the simplest way to implement the grid in the Tailwind CSS and allow the elements to align in the rows and columns.
Syntax:
<div class="grid grid-cols-3 gap-4 p-5">
Example: This illustrates a simple grid with the 3 columns.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Grid Layout</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="grid grid-cols-3
gap-4 p-5">
<div class="bg-blue-500
text-white p-5">
Grid Item 1
</div>
<div class="bg-blue-500
text-white p-5">
Grid Item 2
</div>
<div class="bg-blue-500
text-white p-5">
Grid Item 3
</div>
</div>
</body>
</html>
Output:
2. Responsive Grids
Responsive grid can allows you to create the layouts that adjust on the screen size. Tailwind CSS can provides the responsive variants (sm, md, lg, etc.) to define the different column configurations for different screen sizes.
Syntax:
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-5">
Example: This illustrates the responsive grid that shows the 2 columns on the small screens, 3 columns on the medium screens, and 4 columns on the large screens.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-5">
<div class="bg-green-500
text-white p-5">
Item 1
</div>
<div class="bg-green-500
text-white p-5">
Item 2
</div>
<div class="bg-green-500
text-white p-5">
Item 3
</div>
<div class="bg-green-500
text-white p-5">
Item 4
</div>
<div class="bg-green-500
text-white p-5">
Item 5
</div>
<div class="bg-green-500
text-white p-5">
Item 6
</div>
</div>
</body>
</html>
Output:
3. Auto-Fitting Columns
In cases where you want to auto-fit based on the available space. Tailwind CSS can offers the classes like grid-cols-auto or custom column definitions with arbitrary values. It can be useful when creating the flexible layouts that adjust based on the size of the content.
Syntax:
<div class="grid grid-cols-[minmax(150px,_1fr)] gap-4 p-5">
Example: This example illustrates the grid where the columns auto-fit based on their content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Fit Columns</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="grid grid-cols-[minmax(150px,_1fr)] gap-4 p-5">
<div class="bg-purple-500
text-white p-5">
Auto-fit 1
</div>
<div class="bg-purple-500
text-white p-5">
Auto-fit 2
</div>
<div class="bg-purple-500
text-white p-5">
Auto-fit 3
</div>
</div>
</body>
</html>
Output:
4. Grids with Gaps
We can add the gaps (spacing) between grid rows and columns using the gap-* utilities. We can also cutomize the row gap (row-gap-*) and column gap (col-gap-*) independently.
Syntax:
<div class="grid grid-cols-2 row-gap-8 col-gap-4 p-5">
Example: This illustrates the grid with different row and columns gaps.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid with Gaps</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="grid grid-cols-2
row-gap-8 col-gap-4 p-5">
<div class="bg-red-500
text-white p-5">
Item 1
</div>
<div class="bg-red-500
text-white p-5">
Item 2
</div>
<div class="bg-red-500
text-white p-5">
Item 3
</div>
<div class="bg-red-500
text-white p-5">
Item 4
</div>
</div>
</body>
</html>
Output:
5. Custom Grid Rows
Tailwind can allows you to define the custom grid using the grid-rows-* utility. This is helful when you want to define the specific number of the rows or control the height of rows dynamically.
Syntax:
<div class="grid grid-rows-[100px,200px,150px] gap-4 p-5">
Example: This illustrates the grid with custom row heights.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Grid Rows</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="grid grid-rows-[100px,200px,150px]
gap-4 p-5">
<div class="bg-yellow-500
text-white p-5">
Row 1 (100px)
</div>
<div class="bg-yellow-500
text-white p-5">
Row 2 (200px)
</div>
<div class="bg-yellow-500
text-white p-5">
Row 3 (150px)
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to use Tailwind CSS with esbuild ?
Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
2 min read
How to use Tailwind CSS with Django ?
Tailwind CSS has gained immense popularity among developers for its utility-first approach to styling web applications. Django on the other hand is a robust and flexible web framework written in Python. Combining these two powerful tools can enhance your Django projects. In this article, we will exp
4 min read
Tailwind CSS Grid Template Rows
This class accepts more than one value in tailwind CSS and all the properties are covered as in class form. It is the alternative of CSS grid-template-row property in CSS. It is used to set the number of rows and size of the rows of the grid, here we will do the same but for fast development of fron
2 min read
How to use calc() in Tailwind CSS?
The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.H
2 min read
How to use Radial Gradient in Tailwind CSS ?
A radial gradient is a graphical effect where colors transition in a circular or elliptical pattern. By default, the first color starts at the center and fades out to the edge of the element. Tailwind CSS makes it easy to implement radial gradients with its utility classes. We can use the below appr
3 min read
How to use @apply directive in Tailwind-CSS ?
Tailwind CSS is a popular utility-first CSS framework. It is a set of pre-defined CSS classes that can be used to quickly and easily style your HTML elements without having to write custom CSS code. The classes are organized into a set of utility classes that can be used to control the layout, spaci
3 min read
How to use Diagonal Fractions in Tailwind CSS ?
Tailwind CSS diagonal-fractions utility allows you to display numbers separated by a slash as common diagonal fractions. This activates those sets of figures where the numerator and denominator appear small and are separated by a slash. Syntax:<element class="diagonal-fractions"> Content </
2 min read
Tailwind CSS Grid Auto Rows
This class accepts more than one value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS grid-auto-rows property. This class is used to specify the size for the rows of implicitly generated grid containers. This class is used to utilities to c
3 min read
Tailwind CSS Grid Row Start / End
This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative of CSS grid-row property in CSS. It is used to describes the number of properties that allow to design of grid structures and control the placement of grid items using Tailw
2 min read
Introduction to Tailwind CSS
Tailwind CSS is a utility-first CSS framework that simplifies web development by providing a set of pre-designed utility classes. These utility classes enable you to build custom designs without writing any custom CSS, promoting consistency, scalability, and efficiency. Tailwind shifts the focus fro
4 min read