Skip to content
Related Articles

Related Articles

Tailwind CSS Grid Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Mar, 2022

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Grid describes the number of properties that allow to design of the grid structure of the grid and control the placement of the grid.

Below example will give you a brief idea about the Grid of Tailwind CSS:

Example:

HTML




<!DOCTYPE html>
  
<head>
    <title>Tailwind grid-rows Class</title>
  
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS grid-rows Class</b>
  
    <div id="main" class="grid grid-rows-3 grid-flow-col">
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div>
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div>
    </div>
</body>
  
</html>


Output:

Tailwind CSS Grid

Tailwind CSS Grid


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!