How to use tailwind CSS grid templates in your project.
Tags: tailwindcss, frontend, tutorial, development
Published: 2022-10-04 13:26:33

---
title: How to use tailwind CSS grid templates in your project.
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "frontend", "tutorial", "development"]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ipjj0swj0ri9mkgrp82.png
canonical_url: https://www.devwares.com/blog//how-to-add-tailwind-css-grid-to-your-project/
---

Tailwind CSS boasts of many classes that we can use to style our projects. In today’s Tailwind CSS tutorial, we will look closely at adding Tailwind CSS grid to our projects.

## Table of content

- What is grid?
- What is CSS grid
- Does Tailwind have a grid system ?
- Tailwind CSS Grid Template Rows
- Tailwind CSS Grid Template Rows Example
- What is Tailwind CSS grid template columns
- Tailwind CSS Grid Template columns
- Adding the Tailwind CSS grid column
- Adding space and gap in Tailwind grid
- Responsive Tailwind CSS grid
- Conclusion
- Resources

## What is grid?

A grid is a series of horizontal and vertical lines that intersect each other to form a network of squares and rectangles.

## What is CSS grid?

CSS Grid is made up of horizontal and vertical lines that form rows and columns. This forms a two-dimensional grid method that is used for laying up user interface elements and webpage parts.

## Does Tailwind have a grid system ?

Basically, Tailwind has some grid-template-column utilities which you can use to create basic Tailwind grid with up to 12 equal width columns.
Although, you can modify these by editing the theme in the tailwind configuration file.

## Tailwind CSS Grid Template Rows

Tailwind CSS grid Template rows is a class used to accept multiple values in tailwind CSS. This property is the same as the CSS grid template rows. Below are the different classes and property of the grid Template rows.

| Class          | Properties                                     |
| -------------- | ---------------------------------------------- |
| grid-rows-1    | grid-template-rows: repeat(1, minmax(0, 1fr)); |
| grid-rows-2    | grid-template-rows: repeat(2, minmax(0, 1fr)); |
| grid-rows-3    | grid-template-rows: repeat(3, minmax(0, 1fr)); |
| grid-rows-4    | grid-template-rows: repeat(4, minmax(0, 1fr)); |
| grid-rows-5    | grid-template-rows: repeat(5, minmax(0, 1fr)); |
| grid-rows-6    | grid-template-rows: repeat(6, minmax(0, 1fr)); |
| grid-rows-none | grid-template-rows: none;                      |

## Tailwind CSS Grid Template Rows Example

we are going to show how to use the Tailwind grid template rows here by building template rows using tailwind CSS. You can check out the syntax below.

**Syntax**

```html
<element class="grid grid-rows-number"> Contents... </element>
```

```html
<div class="bg-yellow-500 p-8">
  <div class="grid grid-row-3 gap-4 md:grid-row-2 lg:grid-row-4">
    <div class="bg-blue-700 w-26 h-12 flex items-center justify-center rounded-md">1</div>
    <div class="bg-blue-500 w-26  flex h-12 items-center justify-center rounded-md">2</div>
    <div class="bg-blue-300 w-26 flex h-12 items-center justify-center rounded-md">3</div>
    <div class="bg-blue-500 w-26 flex h-12 items-center justify-center rounded-md">4</div>
    <div class="bg-blue-400 w-26 flex h-12 items-center justify-center rounded-md">5</div>
    <div class="bg-blue-300 w-26 flex h-12 items-center justify-center rounded-md">6</div>
  </div>
</div>
```

some of the Tailwind grid classes used include the following

- `Flex`: sets our element in a flex
- `Justify-center`: this centers our elements
- `items-center` : This centers all the elements in the fles box
- `Grid`: this creates the grid row
- `Grid-row-3`: this creates a 3 grid row
- `rounded-md`: used to create a rounded corner for an element or body. which is the same as border-radius.
- `md:grid-row-2`: this sets up the responsive screen for a medium size device.
- `lg:grid-row-4` : this sets up the responsive screen for a large size device

![grid template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omgpfphya4eqttxssup9.png)

## What is Tailwind CSS grid template columns?

The Tailwind CSS grid template columns are the alternative to CSS grid-template columns. This property is used to set the number of columns and the size of the grid columns.

Today, in our Tailwind grid tutorial, we will look at the various grid columns classes available and build an example.

## Tailwind CSS Grid Template columns

| Class           | Property                                    |
| --------------- | ------------------------------------------- |
| Grid-cols-1:    | the row concedes one column                 |
| Grid-cols-2:    | the row concedes two columns                |
| Grid-cols-3:    | the row concedes three columns              |
| Grid-cols-4:    | the row concedes four columns               |
| Grid-cols-5:    | the row concedes five columns               |
| Grid-cols-6:    | the row concedes six columns                |
| Grid-cols-7:    | the row concedes seven columns              |
| Grid-cols-8:    | the row concedes eight columns              |
| Grid-cols-9:    | the row concedes nine columns               |
| Grid-cols-10:   | the row concedes ten columns                |
| Grid-cols-11:   | the row concedes eleven columns             |
| Grid-cols-12:   | the row concedes twelve columns             |
| Grid-cols-none: | this do not follow the grid-column property |

## How do I use Tailwind grid column?

Using the Tailwind grid is simple with the following syntax below.

**Syntax**

```html
<element class="grid grid-cols-number"> Content of the element </element>
```

Now you can either use a web editor such as [Tailwind play](https://play.tailwindcss.com/) or any other code editor. First we set up our code on a code editor, in our case we used visual studio code.

## Adding the Tailwind CSS grid column

Adding the Tailwind grid is as easy as defining the grid system and adding the number of columns you want to add. For example in our case we used the `grid-cols` and added the number as `-4`.

![space adding Tailwind grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp9rd8l717bq9z8ghawi.png)

## Adding space and gap in Tailwind grid

we can see that our grid column isn't looking nice. We are going to add some spacing and gap to the Tailwind grid column by using the classes `flex`, `justify-content`, `items-center`.

```html
<div class="bg-yellow-500 p-8">
  <div class="grid grid-cols-4 gap-3">
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-700">1</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-500">2</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-300">3</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-500">4</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-400">5</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-200">6</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-600">7</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-100">8</div>
  </div>
</div>
```

![Adding space tailwind grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gry4fli5ehuf3djli4ep.png)

## Responsive Tailwind CSS grid

You can easily make your Tailwind grid column responsive by using some breakpoint classes such as `md:grid-col-4` and `lg:grid-col-4` which defines the sizes of different devices.

```html
<div class="bg-yellow-500 p-8">
  <div class="grid grid-cols-4 gap-3 md:grid-col-4 lg:grid-col-4">
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-700">1</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-500">2</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-300">3</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-500">4</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-400">5</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-200">6</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-600">7</div>
    <div class="w-26 flex h-12 items-center justify-center rounded-md bg-blue-100">8</div>
  </div>
</div>
```

![Tailwind grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spi4322k2d1ijrcdomqq.png)

## Conclusion

In this tailwind CSS tutorial, we looked at what Tailwind grid is and what is used for. We also further built a tailwind responsive grid column to show how Tailwind grid can be used in your project to control height and size of elements. I hope you found this content helpful and enjoyed it.

## Resources 

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind css in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)
- [Tailwind CSS Colors 3.0](https://www.devwares.com/blog/How-to-add-color-to-Tailwind/)
- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)
- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)