🤩
Windframe Import update is finally here!
postImage

How to use Tailwind CSS Grid.

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.

Table of content

  • 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 Tailwind CSS Grid?

A class utility called Tailwind CSS Grid is made up of rows and columns of horizontal and vertical lines. This creates a two-dimensional grid system that is used to organize web content and user interface components.

Does Tailwind have a grid system ?

There are a couple ways to make a grid layout with Tailwind even if it doesn't have one built in. One choice is to make use of Tailwind's CSS Grid capabilities. You can also use a flexbox grid system or a third-party grid system like Bootstrap.

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>
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 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
1
2
3
4
5
6

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 layout.

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 I use Tailwind Grid Column?

Using the Tailwind Grid Column is as simple as specifying the the number of columns in the grid layout. An example is the syntax below.

Syntax

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

Adding the Tailwind CSS grid column

We are going to build a grid layout using the Tailwind column. Adding the Tailwind grid column 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-4 utilies to add the number of columns we want on the grid layout.

html
<div class="bg-yellow-500 p-8">
<div class="grid grid-cols-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>
1
2
3
4
5
6
7
8

Adding space and gap in Tailwind grid column

we can see that our Tailwind 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>
1
2
3
4
5
6
7
8

How do you make a Tailwind CSS grid Responsive

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>
1
2
3
4
5
6
7
8

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

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

...