Skip to content
Related Articles

Related Articles

Tailwind CSS Grid Complete Reference

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

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
Related Articles

Start Your Coding Journey Now!