🎉
Windframe Form builder is finally here.
postImage

Tailwind grid-How to use tailwind CSS grid templates in your project.

blogImage

By Emmanuel Chinonso

Technical Writer

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.

What is grid?

A grid is a series of horizontal and vertical lines that interset 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-dimentional grid method that is used for laying up user interface elements and webpage parts.

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.

Grid Template columns

ClassProperty
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 you use Tailwind grid?

Using the Tailwind grid is simple with syntax below.

Syntax

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

We are going to demostrate how you can use the Tailwind grid by Building a tailwind 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 responsive tailwind grid we created should look like the image below.

Tailwind CSS grid

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.

ClassProperties
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-nonegrid-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>

Code

html
<div class="grid grid-rows-3 grid-flow-col">
<div class="bg-purple-700 w-26 h-12 rounded-lg">1</div>
<div class="bg-purple-500 w-26 h-12 rounded-lg">2</div>
<div class="bg-purple-300 w-26 h-12 rounded-lg">3</div>
<div class="bg-purple-500 w-26 h-12 rounded-lg">4</div>
<div class="bg-purple-400 w-26 h-12 rounded-lg">5</div>
<div class="bg-purple-300 w-26 h-12 rounded-lg">6</div>
</div>
</div>

The Tailwind grid will look like the image below

Tailwind css grid template row

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 colume to show how Tailwind CSS 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

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...