How to add tailwind CSS grid to your project.
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 01:26:18

---
title: How to add tailwind CSS grid to your project.
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-add-tailwind-css-grid-to-your-project
cover_image: https://www.devwares.com/blog/images/css-grid-in-your-project.png
---

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.

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 CSS tutorial, we will look at the various grid columns classes available and build an example. 

## Grid Template columns

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 
 
**Syntax**

The necessary syntax to use when using this class in your project will look like the code below

**Code:**

```html
<element class = “gird gird-cols-number”>Content of the element </element>
```

## Building a grid column

We are going to try an example and build a grid column.

**Code:**

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid column</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="text-center ">
    <div class="flex justify-center">
        <img src="images/devwares-logo.png" alt="" class="w-24">
    </div>

    <h2 class="text-blue-700 text-4xl font-bold">Tailwind CSS grid-cols class</h2>
    <div class="grid grid-cols-4 gap-1 justify-evenly">
        <div class="bg-purple-700 w-26 h-12">1</div>
        <div class="bg-purple-500 w-26 h-12">1</div>
        <div class="bg-purple-300 w-26 h-12">1</div>
        <div class="bg-purple-500 w-26 h-12">1</div>
        <div class="bg-purple-400 w-26 h-12">1</div>
        <div class="bg-purple-300 w-26 h-12">6</div>
        <div class="bg-purple-200 w-26 h-12">7</div>
        <div class="bg-purple-100 w-26 h-12">8</div>
    </div>
</body>

</html>
```

In the code above, we linked our Tailwind CSS file to our project after installation.
We went ahead to create the body of our project by adding some Tailwind CSS classes such as
- Flex: sets our element in a flex 
- Justify-center: this centers our elements
- Text-center: this centers our text content 
- Grid: this creates the grid columns
- Grid-cols-4: this creates a 4 grid column
- Justify-evenly: this distributes our element in evenly form

The project we created should look like the image below.

![Tailwind CSS grid](https://www.devwares.com/blog/images/css-grid-in-your-project2.png)
 
###Conclusion

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

## Design and code tailwind css websites 3x faster

We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## 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)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [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 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/)