How to use tailwind CSS grid templates in your project.
By Emmanuel Chinonso
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
The necessary syntax to use when using this class in your project will look like the code below
1 <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.
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>grid column</title> 9 <link rel="stylesheet" href="style.css"> 10 </head> 11 12 <body class="text-center "> 13 <div class="flex justify-center"> 14 <img src="images/devwares-logo.png" alt="" class="w-24"> 15 </div> 16 17 <h2 class="text-blue-700 text-4xl font-bold">Tailwind CSS grid-cols class</h2> 18 <div class="grid grid-cols-4 gap-1 justify-evenly"> 19 <div class="bg-purple-700 w-26 h-12">1</div> 20 <div class="bg-purple-500 w-26 h-12">1</div> 21 <div class="bg-purple-300 w-26 h-12">1</div> 22 <div class="bg-purple-500 w-26 h-12">1</div> 23 <div class="bg-purple-400 w-26 h-12">1</div> 24 <div class="bg-purple-300 w-26 h-12">6</div> 25 <div class="bg-purple-200 w-26 h-12">7</div> 26 <div class="bg-purple-100 w-26 h-12">8</div> 27 </div> 28 </body> 29 30 </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.
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.
Create Stunning websites and web apps
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.Try contrast pro
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