Get Lifetime Access to 12,400+ Components and UI Builder with ✨ AI Assistant! 👇
🚀 Get it Now!
Tailkits

Tailwind CSS Grid Components

Free

Responsive Tailwind grid components in HTML

Tailwind CSS Grid Components Image 1
Details About Tailwind CSS Grid Components
Contents

Code Example of Tailwind CSS Grid Component

Here is the code of the image above that shows a landing page feature section:

<section class="w-full py-12 md:py-24 lg:py-32">
  <div class="container grid items-center justify-center gap-4 px-4 text-center md:px-6 lg:gap-10">
    <div class="space-y-3">
      <h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Our Key Features</h2>
      <p class="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
        Discover the powerful features that make our platform the best choice for your business.
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 lg:gap-10">
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <circle cx="12" cy="12" r="4"></circle>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Blazing Fast</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform delivers lightning-fast performance, ensuring your users have a seamless experience.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <polyline points="18 8 22 12 18 16"></polyline>
            <polyline points="6 8 2 12 6 16"></polyline>
            <line x1="2" x2="22" y1="12" y2="12"></line>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Highly Customizable</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Tailor our platform to your unique needs and preferences with our extensive customization options.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Scalable Infrastructure</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our robust infrastructure scales seamlessly to handle your growing needs, ensuring uninterrupted
            service.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
            <path d="m9 12 2 2 4-4"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Secure and Reliable</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Your data and applications are protected by our robust security measures, giving you peace of mind.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
            <rect width="20" height="14" x="2" y="6" rx="2"></rect>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Enterprise-Grade</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform is built to handle the demands of large-scale businesses, ensuring enterprise-level
            performance.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">24/7 Support</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our dedicated support team is available around the clock to assist you with any questions or issues.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path>
            <path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path>
            <path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Seamless Integration</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform seamlessly integrates with your existing tools and workflows, ensuring a smooth transition.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
            <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Accelerate Innovation</h3>
        </div>
      </div>
    </div>
  </div>
</section>

Grid with Icons

<section class="py-12">
  <div class="container mx-auto px-4">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold">Explore Nature's Wonders</h2>
      <p class="text-gray-500 dark:text-gray-400 mt-2">
        Discover the perfect outdoor experience for every season and mood.
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-yellow-400 mr-2"
          >
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
          </svg>
          <h3 class="text-lg font-semibold">Sunny Days</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Enjoy the warmth and radiance of the sun with our premium outdoor experiences.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-blue-400 mr-2"
          >
            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path>
            <path d="M16 14v6"></path>
            <path d="M8 14v6"></path>
            <path d="M12 16v6"></path>
          </svg>
          <h3 class="text-lg font-semibold">Rainy Moments</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embrace the soothing sounds of rain with our cozy indoor activities.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-blue-600 mr-2"
          >
            <line x1="2" x2="22" y1="12" y2="12"></line>
            <line x1="12" x2="12" y1="2" y2="22"></line>
            <path d="m20 16-4-4 4-4"></path>
            <path d="m4 8 4 4-4 4"></path>
            <path d="m16 4-4 4-4-4"></path>
            <path d="m8 20 4-4 4 4"></path>
          </svg>
          <h3 class="text-lg font-semibold">Winter Wonderland</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embrace the magic of winter with our exciting snow-based adventures.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-green-500 mr-2"
          >
            <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
            <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
          </svg>
          <h3 class="text-lg font-semibold">Nature's Embrace</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Reconnect with nature through our immersive outdoor experiences.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-orange-500 mr-2"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
          </svg>
          <h3 class="text-lg font-semibold">Explore the Unknown</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embark on thrilling adventures and discover the world's hidden gems.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4"></div>
      </div>
    </div>
  </div>
</section>

Tailwind CSS has revolutionized the way developers approach styling by offering a utility-first framework that promotes rapid UI development. Among its powerful features, the grid system stands out, enabling the creation of complex, responsive layouts with ease.

Understanding Tailwind's Grid System

At its core, Tailwind's grid system is built upon CSS Grid, a two-dimensional layout system that excels at handling both rows and columns. Tailwind simplifies the intricacies of CSS Grid by providing a set of utility classes that allow you to define grid structures without writing custom CSS.

Setting Up a Basic Grid

Creating a grid in Tailwind starts with the grid class, which activates the grid layout on a container. From there, you can define the number of columns, specify gaps between them, and adjust their behavior across different screen sizes.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

In this example:

  • grid activates the grid layout.

  • grid-cols-3 creates a three-column grid.

  • gap-4 adds spacing between the grid items.

Responsive Design with Tailwind Grid

One of Tailwind's strengths is its mobile-first approach, making it straightforward to create responsive grids. By using breakpoint prefixes, you can adjust the number of columns and other grid properties based on the viewport size.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
  <!-- Grid items -->
</div>

Here:

  • The grid starts with one column on small screens.

  • sm:grid-cols-2 changes to two columns on small screens and above.

  • md:grid-cols-4 expands to four columns on medium screens and above.

Defining Column Widths and Auto Layout

Tailwind allows you to customize column widths using predefined fractions or by leveraging the auto and minmax functions.

<div class="grid grid-cols-3">
  <div class="col-span-2 bg-yellow-400">Wide</div>
  <div class="bg-purple-400">Narrow</div>
  <div class="col-span-3 bg-pink-400">Full Width</div>
</div>

In this setup:

  • col-span-2 makes the first item span two columns.

  • The second item occupies one column by default.

  • col-span-3 ensures the third item stretches across all three columns.

Aligning and Justifying Grid Items

Tailwind provides utilities to control the alignment and justification of grid items both horizontally and vertically.

<div class="grid grid-cols-3 items-center justify-between h-32">
  <div class="bg-indigo-500">A</div>
  <div class="bg-teal-500">B</div>
  <div class="bg-orange-500">C</div>
</div>

Here:

  • items-center vertically centers the items within their grid areas.

  • justify-between distributes the items evenly with space between them.

  • h-32 sets a fixed height for the grid container.

Advanced Grid Techniques

Beyond the basics, Tailwind's grid system offers advanced features that can help you create more intricate and dynamic layouts.

Nested Grids

Sometimes, a single grid isn't enough to achieve the desired layout. Tailwind allows you to nest grids within grid items effortlessly.

<div class="grid grid-cols-2 gap-4">
  <div class="bg-gray-200">
    <div class="grid grid-cols-2 gap-2">
      <div class="bg-blue-300">Nested 1</div>
      <div class="bg-blue-400">Nested 2</div>
    </div>
  </div>
  <div class="bg-gray-300">Outer 2</div>
</div>

This approach enables you to build complex structures by combining multiple grid layouts.

Grid Template Areas with Tailwind

While Tailwind doesn't natively support CSS Grid's template areas, you can achieve similar layouts by strategically using row and column spans.

<div class="grid grid-cols-4 grid-rows-2 gap-4">
  <div class="col-span-2 row-span-2 bg-green-500">Area 1</div>
  <div class="col-span-2 bg-yellow-500">Area 2</div>
  <div class="col-span-4 bg-red-500">Area 3</div>
</div>

In this example:

  • col-span-2 row-span-2 creates a large area spanning multiple rows and columns.

  • You can arrange other elements around it to mimic grid template areas.

Utilizing Auto Flow and Dense Packing

Tailwind's support for auto-flow and dense packing allows for dynamic and adaptive grid layouts.

<div class="grid grid-cols-3 auto-flow-dense gap-4">
  <!-- Grid items of varying sizes -->
</div>

The auto-flow-dense class ensures that items fill in gaps efficiently, creating a more compact layout.

Best Practices for Using Tailwind Grids

To make the most of Tailwind's grid system, consider the following best practices:

  1. Start Simple: Begin with basic grid structures and incrementally add complexity. This approach helps in understanding how different classes interact.

  2. Leverage Responsiveness: Utilize Tailwind's responsive prefixes to ensure your grid adapts seamlessly across devices.

  3. Combine with Other Utilities: Tailwind's grid utilities work well with other utilities like flexbox, spacing, and typography. Combining these can lead to more sophisticated designs.

  4. Maintain Consistency: Use consistent spacing and sizing to create harmonious layouts. Tailwind's predefined spacing scales can assist in maintaining uniformity.

  5. Optimize for Accessibility: Ensure that your grid layouts are accessible. Proper use of semantic HTML and ARIA attributes can enhance usability for all users.

Practical Examples of Tailwind Grids

While avoiding long code snippets, let's explore some practical scenarios where Tailwind grids shine:

Tailwind's grid system is perfect for image galleries that need to adjust based on screen size. By defining varying column counts at different breakpoints, the gallery remains visually appealing on all devices.

Building a Dashboard Layout

Dashboards often require multiple panels arranged in a complex grid. Tailwind allows you to create a flexible dashboard layout where widgets can span multiple rows and columns, adapting as needed.

Designing a Blog Layout

A classic blog layout with a main content area and a sidebar can be effortlessly achieved using Tailwind's grid utilities, ensuring the sidebar stacks below the content on smaller screens.

Tailwind Grid vs. Flexbox

While Tailwind offers both grid and flexbox utilities, it's essential to know when to use each:

  • Grid is ideal for two-dimensional layouts involving both rows and columns.

  • Flexbox excels at one-dimensional layouts, either in a row or a column.

Understanding their strengths ensures you choose the right tool for your layout challenges.

Extending Tailwind's Grid Capabilities

Tailwind is highly customizable, allowing you to extend its grid system to better fit your project's needs. By modifying the tailwind.config.js file, you can add custom grid templates, spans, and more.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        '16': 'repeat(16, minmax(0, 1fr))',
      },
    },
  },
};

This flexibility ensures that Tailwind remains adaptable, accommodating a wide range of design requirements.

Tailwind's grid components offer a robust and flexible system for building responsive, complex layouts with minimal effort.

FAQ

Does Tailwind support IE11 for its grid system?

Tailwind's grid utilities rely on modern CSS Grid, which isn't fully supported in IE11. It's recommended to use progressive enhancement or provide fallback styles for older browsers.

How do I adjust the gap between grid items in Tailwind?

You can control the spacing between grid items using the gap-{size} classes. For example, gap-4 sets a consistent gap, while gap-x-2 gap-y-6 allows you to specify horizontal and vertical gaps separately.

Can I create asymmetric layouts with Tailwind's grid?

Absolutely! Tailwind's grid utilities allow you to span items across multiple rows and columns, enabling the creation of asymmetric and dynamic layouts that can add visual interest to your designs.

How does Tailwind's grid system compare to traditional CSS Grid?

Tailwind's grid system abstracts the complexity of traditional CSS Grid by providing utility classes that map directly to grid properties. This approach streamlines workflow, making it faster to implement responsive and complex layouts without writing custom CSS.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.