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
<element class="grid grid-rows-number"> Contents... </element>
<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
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
<element class="grid grid-cols-number"> Content of the element </element>
Now you can either use a web editor such as Tailwind play 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.
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.
<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>
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.
<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>
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
Tailwind grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)