Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Gap

Gap property helps you set consistent spacing between items in a grid or a flexbox container without the need for additional wrappers, margins, or manual adjustments.

Tailwind's gap utilities allow you to precisely control the spacing across rows and columns or independently modify them using responsive breakpoints, pseudo-states, or customized values. Let's dive into the depths of using Gap in Tailwind CSS:

ClassPropertiesExample
gap-0gap: 0px;<div className="gap-0"></div>
gap-x-0column-gap: 0px;<div className="gap-x-0"></div>
gap-y-0row-gap: 0px;<div className="gap-y-0"></div>
gap-pxgap: 1px;<div className="gap-px"></div>
gap-x-pxcolumn-gap: 1px;<div className="gap-x-px"></div>
gap-y-pxrow-gap: 1px;<div className="gap-y-px"></div>
gap-0.5gap: 0.125rem; <div className="gap-0.5"></div>
gap-x-0.5column-gap: 0.125rem; <div className="gap-x-0.5"></div>
gap-y-0.5row-gap: 0.125rem; <div className="gap-y-0.5"></div>
gap-1gap: 0.25rem; <div className="gap-1"></div>
gap-x-1column-gap: 0.25rem; <div className="gap-x-1"></div>
gap-y-1row-gap: 0.25rem; <div className="gap-y-1"></div>
gap-1.5gap: 0.375rem; <div className="gap-1.5"></div>
gap-x-1.5column-gap: 0.375rem; <div className="gap-x-1.5"></div>
gap-y-1.5row-gap: 0.375rem; <div className="gap-y-1.5"></div>
gap-2gap: 0.5rem; <div className="gap-2"></div>
gap-x-2column-gap: 0.5rem; <div className="gap-x-2"></div>
gap-y-2row-gap: 0.5rem; <div className="gap-y-2"></div>
gap-2.5gap: 0.625rem; <div className="gap-2.5"></div>
gap-x-2.5column-gap: 0.625rem; <div className="gap-x-2.5"></div>
gap-y-2.5row-gap: 0.625rem; <div className="gap-y-2.5"></div>
gap-3gap: 0.75rem; <div className="gap-3"></div>
gap-x-3column-gap: 0.75rem; <div className="gap-x-3"></div>
gap-y-3row-gap: 0.75rem; <div className="gap-y-3"></div>
gap-3.5gap: 0.875rem; <div className="gap-3.5"></div>
gap-x-3.5column-gap: 0.875rem; <div className="gap-x-3.5"></div>
gap-y-3.5row-gap: 0.875rem; <div className="gap-y-3.5"></div>
gap-4gap: 1rem; <div className="gap-4"></div>
gap-x-4column-gap: 1rem; <div className="gap-x-4"></div>
gap-y-4row-gap: 1rem; <div className="gap-y-4"></div>
gap-5gap: 1.25rem; <div className="gap-5"></div>
gap-x-5column-gap: 1.25rem; <div className="gap-x-5"></div>
gap-y-5row-gap: 1.25rem; <div className="gap-y-5"></div>
gap-6gap: 1.5rem; <div className="gap-6"></div>
gap-x-6column-gap: 1.5rem; <div className="gap-x-6"></div>
gap-y-6row-gap: 1.5rem; <div className="gap-y-6"></div>
gap-7gap: 1.75rem; <div className="gap-7"></div>
gap-x-7column-gap: 1.75rem; <div className="gap-x-7"></div>
gap-y-7row-gap: 1.75rem; <div className="gap-y-7"></div>
gap-8gap: 2rem; <div className="gap-8"></div>
gap-x-8column-gap: 2rem; <div className="gap-x-8"></div>
gap-y-8row-gap: 2rem; <div className="gap-y-8"></div>
gap-9gap: 2.25rem; <div className="gap-9"></div>
gap-x-9column-gap: 2.25rem; <div className="gap-x-9"></div>
gap-y-9row-gap: 2.25rem; <div className="gap-y-9"></div>
gap-10gap: 2.5rem; <div className="gap-10"></div>
gap-x-10column-gap: 2.5rem; <div className="gap-x-10"></div>
gap-y-10row-gap: 2.5rem; <div className="gap-y-10"></div>
gap-11gap: 2.75rem; <div className="gap-11"></div>
gap-x-11column-gap: 2.75rem; <div className="gap-x-11"></div>
gap-y-11row-gap: 2.75rem; <div className="gap-y-11"></div>
gap-12gap: 3rem; <div className="gap-12"></div>
gap-x-12column-gap: 3rem; <div className="gap-x-12"></div>
gap-y-12row-gap: 3rem; <div className="gap-y-12"></div>
gap-14gap: 3.5rem; <div className="gap-14"></div>
gap-x-14column-gap: 3.5rem; <div className="gap-x-14"></div>
gap-y-14row-gap: 3.5rem; <div className="gap-y-14"></div>
gap-16gap: 4rem; <div className="gap-16"></div>
gap-x-16column-gap: 4rem; <div className="gap-x-16"></div>
gap-y-16row-gap: 4rem; <div className="gap-y-16"></div>
gap-20gap: 5rem; <div className="gap-20"></div>
gap-x-20column-gap: 5rem; <div className="gap-x-20"></div>
gap-y-20row-gap: 5rem; <div className="gap-y-20"></div>
gap-24gap: 6rem; <div className="gap-24"></div>
gap-x-24column-gap: 6rem; <div className="gap-x-24"></div>
gap-y-24row-gap: 6rem; <div className="gap-y-24"></div>
gap-28gap: 7rem; <div className="gap-28"></div>
gap-x-28column-gap: 7rem; <div className="gap-x-28"></div>
gap-y-28row-gap: 7rem; <div className="gap-y-28"></div>
gap-32gap: 8rem; <div className="gap-32"></div>
gap-x-32column-gap: 8rem; <div className="gap-x-32"></div>
gap-y-32row-gap: 8rem; <div className="gap-y-32"></div>
gap-36gap: 9rem; <div className="gap-36"></div>
gap-x-36column-gap: 9rem; <div className="gap-x-36"></div>
gap-y-36row-gap: 9rem; <div className="gap-y-36"></div>
gap-40gap: 10rem; <div className="gap-40"></div>
gap-x-40column-gap: 10rem; <div className="gap-x-40"></div>
gap-y-40row-gap: 10rem; <div className="gap-y-40"></div>
gap-44gap: 11rem; <div className="gap-44"></div>
gap-x-44column-gap: 11rem; <div className="gap-x-44"></div>
gap-y-44row-gap: 11rem; <div className="gap-y-44"></div>
gap-48gap: 12rem; <div className="gap-48"></div>
gap-x-48column-gap: 12rem; <div className="gap-x-48"></div>
gap-y-48row-gap: 12rem; <div className="gap-y-48"></div>
gap-52gap: 13rem; <div className="gap-52"></div>
gap-x-52column-gap: 13rem; <div className="gap-x-52"></div>
gap-y-52row-gap: 13rem; <div className="gap-y-52"></div>
gap-56gap: 14rem; <div className="gap-56"></div>
gap-x-56column-gap: 14rem; <div className="gap-x-56"></div>
gap-y-56row-gap: 14rem; <div className="gap-y-56"></div>
gap-60gap: 15rem; <div className="gap-60"></div>
gap-x-60column-gap: 15rem; <div className="gap-x-60"></div>
gap-y-60row-gap: 15rem; <div className="gap-y-60"></div>
gap-64gap: 16rem; <div className="gap-64"></div>
gap-x-64column-gap: 16rem; <div className="gap-x-64"></div>
gap-y-64row-gap: 16rem; <div className="gap-y-64"></div>
gap-72gap: 18rem; <div className="gap-72"></div>
gap-x-72column-gap: 18rem; <div className="gap-x-72"></div>
gap-y-72row-gap: 18rem; <div className="gap-y-72"></div>
gap-80gap: 20rem; <div className="gap-80"></div>
gap-x-80column-gap: 20rem; <div className="gap-x-80"></div>
gap-y-80row-gap: 20rem; <div className="gap-y-80"></div>
gap-96gap: 24rem; <div className="gap-96"></div>
gap-x-96column-gap: 24rem; <div className="gap-x-96"></div>
gap-y-96row-gap: 24rem; <div className="gap-y-96"></div>

Overview of Gap

Adding the Gap

Gap utilities in Tailwind CSS help you quickly set the spacing between elements in Grid or Flexbox layouts.

In this snippet, gap-6 adds evenly spaced gaps between grid items. The utility ensures that the horizontal and vertical space between elements is consistent (1.5rem here).

This is a live editor. Play around with it!
export default function ContentGrid() {
  return (
    <div className="flex flex-wrap content-start gap-6 h-screen w-screen gap- bg-gray-50 p-2">
      {/* Using gap-6 equals 1.5rem */}
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

Setting Different Gaps for Rows and Columns

Tailwind also supports precise control over horizontal (column-gap) and vertical (row-gap) gaps. To independently adjust the row and column gap while still using Grid layouts or Flexbox, use the gap-x-* and gap-y-* utilities.

In the below snippet, gap-y-6 creates a vertical spacing of 1.5rem between rows and gap-x-12 creates a horizontal spacing of 3rem between columns.

This is a live editor. Play around with it!
export default function SpecificGaps() {
  return (
    <div className="flex flex-wrap content-start gap-y-6 gap-x-12 h-screen w-screen bg-gray-50 p-2">
      {/* Row gap = 1.5rem, Column gap = 3rem */}
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

States and Responsiveness

Tailwind provides states and breakpoints modifiers for scenarios where you may want to change the gap values based on states and breakpoints.

Hover and Focus States

You can link spacing utilities with interaction states, such as hover or focus. Let’s say you want larger gaps between images when a user hovers over them:

This is a live editor. Play around with it!
export default function HoverEffectGaps() {
  return (
    <div className="flex flex-wrap content-start gap-4 hover:gap-8 h-screen w-screen bg-gray-50 p-2">
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

With hover:gap-8, whenever the container is hovered over, the space between items increases seamlessly.

Breakpoint Modifiers

Tailwind's also supports breakpoint modifiers to customize gaps based on the screen size. It ensures that gap properties adjust fluidly across breakpoints:

This is a live editor. Play around with it!
export default function ResponsiveLayout() {
  return (
    <div className="flex flex-wrap content-start gap-2 md:gap-6 lg:gap-12 h-screen w-screen p-5">
       <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

In this context:

  • Smaller screens default to gap-2.
  • Medium screens (md) increase spacing to gap-6 for wider readability.
  • Large screens (lg) achieve ample spacing with gap-12.

Custom Gap

Sometimes, predefined utilities might not suit your design specifications. In such occurrences, customized gap values can come into play.

Extending the Theme

To implement unique gap values across your projects, you can add them to your Tailwind configuration file under the theme.extend section. For example:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

  export default function CustomizedGaps() {
  return (
    <div className="flex flex-wrap content-start gap-new h-screen w-screen p-10">
      {/* gap-18 refers to the custom spacing defined above */}
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

Now, gap-18 becomes available at your disposal across projects.

Using Arbitrary Values

For scenarios that demand spacing beyond even the extended configurations, Tailwind accommodates arbitrary values:

This is a live editor. Play around with it!
export default function ArbitraryGaps() {
  return (
    <div className="flex flex-wrap content-start gap-[2.37rem] h-screen w-screen bg-red-50 p-8">
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Unsplash Image 1" 
      />
            <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Unsplash Image 1" 
      />
      <img 
        className="rounded-lg shadow-lg h-24 w-24"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Unsplash Image 2" 
      />
    </div>
  );
}

Here:

  • gap-[7.25rem] allows you to precisely define spacing at 7.25rem.
  • Such flexibility ensures compatibility across countless design contexts.

Real World Examples

Photo Gallery with Dynamic Gap Spacing

This component creates a responsive photo gallery with different gap sizes based on screen size.

This is a live editor. Play around with it!
export default function PhotoGallery() {
  const photos = [
    {
      src: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
      alt: "Mountain landscape",
      title: "Mountain Vista"
    },
    {
      src: "https://images.unsplash.com/photo-1628747992263-9d7a96abee05",
      alt: "Ocean sunset",
      title: "Sunset Beach"
    },
    {
      src: "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
      alt: "Forest pathway",
      title: "Forest Trail"
    },
    {
      src: "https://images.unsplash.com/photo-1682687219800-bba120d709c5",
      alt: "Desert dunes",
      title: "Desert Sands"
    },
    {
      src: "https://images.unsplash.com/photo-1682687220199-d0124f48f95b",
      alt: "Snow peaks",
      title: "Winter Mountains"
    },
    {
      src: "https://images.unsplash.com/photo-1682687219570-4c596363fd96",
      alt: "Waterfall",
      title: "Cascading Falls"
    }
  ];

  return (
    <div className="container mx-auto p-4">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
        {photos.map((photo, index) => (
          <div key={index} className="rounded-lg overflow-hidden shadow-lg">
            <img
              src={photo.src}
              alt={photo.alt}
              className="w-full h-64 object-cover"
            />
            <h3 className="p-4 text-xl font-semibold">{photo.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Directory with Vertical Gap

A team directory featuring vertical gaps between member cards.

This is a live editor. Play around with it!
export default function TeamDirectory() {
  const team = [
    {
      name: "Sarah Johnson",
      role: "CEO",
      avatar: "https://images.unsplash.com/photo-1701096374092-bb70915fdc5c",
      bio: "10+ years leadership experience"
    },
    {
      name: "Emma Wilson",
      role: "Design Lead",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      bio: "UX/UI specialist"
    },
    {
      name: "Alex Thompson",
      role: "Product Manager",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      bio: "Product strategy expert"
    },
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex flex-col gap-y-8">
        {team.map((member, index) => (
          <div key={index} className="flex items-center bg-white rounded-xl p-6 shadow-md">
            <img
              src={member.avatar}
              alt={member.name}
              className="w-24 h-24 rounded-full object-cover"
            />
            <div className="ml-6">
              <h3 className="text-xl font-bold">{member.name}</h3>
              <p className="text-blue-600 font-medium">{member.role}</p>
              <p className="mt-2 text-gray-600">{member.bio}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Feature Grid with Responsive Gap

A feature showcase with responsive gap spacing and icon grid.

This is a live editor. Play around with it!
export default function FeatureGrid() {
  const features = [
    {
      icon: "https://images.unsplash.com/photo-1682686581221-c126206d12f0",
      title: "Analytics",
      description: "Real-time data analysis tools"
    },
    {
      icon: "https://images.unsplash.com/photo-1682686581030-7fa4ea2b96c3",
      title: "Authentication",
      description: "Multi-factor authentication system"
    },
    {
      icon: "https://images.unsplash.com/photo-1682686580186-b55d2a91053c",
      title: "Backup",
      description: "Automated backup solutions"
    }
  ];

  return (
    <div className="bg-gray-50 py-12">
      <div className="max-w-6xl mx-auto px-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
          {features.map((feature, index) => (
            <div key={index} className="bg-white p-6 rounded-2xl shadow-sm">
              <div className="flex flex-col gap-4">
                <img
                  src={feature.icon}
                  alt={feature.title}
                  className="w-12 h-12 rounded-lg"
                />
                <h3 className="text-xl font-bold">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Product Pricing Cards with Variable Gap

A pricing comparison layout with different gap sizes between elements.

This is a live editor. Play around with it!
export default function PricingCards() {
  const plans = [
    {
      name: "Starter",
      price: "$19",
      features: ["5 Users", "10GB Storage", "Basic Support", "API Access", "Weekly Backups", "Community Access"]
    },
    {
      name: "Professional",
      price: "$49",
      features: ["25 Users", "50GB Storage", "Priority Support", "Advanced API", "Daily Backups", "Training Resources"]
    },
    {
      name: "Enterprise",
      price: "$99",
      features: ["Unlimited Users", "1TB Storage", "24/7 Support", "Custom API", "Real-time Backups", "Dedicated Manager"]
    },
  ];

  return (
    <div className="bg-gray-100 py-16">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 lg:gap-8">
          {plans.map((plan, index) => (
            <div key={index} className="bg-white rounded-2xl shadow-lg p-8">
              <div className="flex flex-col gap-6">
                <h3 className="text-2xl font-bold text-center">{plan.name}</h3>
                <p className="text-4xl font-bold text-center text-blue-600">{plan.price}<span className="text-sm text-gray-500">/month</span></p>
                <ul className="flex flex-col gap-3">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-center gap-2">
                      <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                      </svg>
                      {feature}
                    </li>
                  ))}
                </ul>
                <button className="mt-4 w-full py-3 px-6 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                  Choose Plan
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Blog Post Grid with Adaptive Gap

A responsive blog post grid with adaptive gap spacing based on content length.

This is a live editor. Play around with it!
export default function BlogGrid() {
  const posts = [
    {
      title: "The Future of Web Development",
      image: "https://images.unsplash.com/photo-1682687220199-d0124f48f95b",
      category: "Technology",
      author: "Alex Smith",
      date: "2023-05-01",
      excerpt: "Exploring upcoming trends in web development"
    },
    {
      title: "Mastering CSS Grid Layout",
      image: "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
      category: "Development",
      author: "Emma Davis",
      date: "2023-05-02",
      excerpt: "Complete guide to CSS Grid mastery"
    },
    {
      title: "JavaScript Best Practices",
      image: "https://images.unsplash.com/photo-1682687219570-4c596363fd96",
      category: "Programming",
      author: "John Wilson",
      date: "2023-05-03",
      excerpt: "Writing clean and maintainable JavaScript"
    },
    {
      title: "UI Design Principles",
      image: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
      category: "Design",
      author: "Sarah Johnson",
      date: "2023-05-04",
      excerpt: "Essential principles for modern UI design"
    },
    {
      title: "Mobile-First Development",
      image: "https://images.unsplash.com/photo-1682687219800-bba120d709c5",
      category: "Mobile",
      author: "Lisa Park",
      date: "2023-05-06",
      excerpt: "Building responsive mobile-first websites"
    }
  ];

  return (
    <div className="bg-gray-50 py-12">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12">
          {posts.map((post, index) => (
            <article key={index} className="flex flex-col gap-4 bg-white rounded-xl overflow-hidden shadow-md">
              <img
                src={post.image}
                alt={post.title}
                className="w-full h-48 object-cover"
              />
              <div className="p-6 flex flex-col gap-3">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium text-blue-600">{post.category}</span>
                  <span className="text-gray-400">•</span>
                  <span className="text-sm text-gray-500">{post.date}</span>
                </div>
                <h2 className="text-xl font-bold">{post.title}</h2>
                <p className="text-gray-600">{post.excerpt}</p>
                <div className="mt-4 flex items-center gap-3">
                  <span className="text-sm font-medium">By {post.author}</span>
                  <button className="text-blue-600 text-sm font-medium hover:underline">
                    Read More →
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

Customization Examples

Responsive Photo Gallery with Custom Gap Spacing

This example demonstrates a responsive photo gallery with custom gap values that adapt to different screen sizes.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function PhotoGallery() {
  const photos = [
    { id: 1, url: 'https://images.unsplash.com/photo-1682687220923-c58b9a4592ae', alt: 'Nature 1' },
    { id: 2, url: 'https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07', alt: 'Nature 2' },
    { id: 3, url: 'https://images.unsplash.com/photo-1505820013142-f86a3439c5b2', alt: 'Nature 3' },
  ];

  return (
    <div className="container mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 
                      gap-gallery-sm md:gap-gallery lg:gap-gallery-lg">
        {photos.map((photo) => (
          <div key={photo.id} className="aspect-square overflow-hidden rounded-lg">
            <img
              src={photo.url}
              alt={photo.alt}
              className="w-full h-full object-cover transition-transform hover:scale-105"
            />
          </div>
        ))}
      </div>
    </div>
  );
}

Dashboard Card Layout with Dynamic Gap Spacing

This example shows a dashboard layout with custom gap values between cards.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function DashboardLayout() {
  const stats = [
    { title: 'Total Users', value: '12,345', trend: '+15%' },
    { title: 'Revenue', value: '$45,678', trend: '+8%' },
    { title: 'Active Sessions', value: '892', trend: '+12%' },
    { title: 'Conversion Rate', value: '3.2%', trend: '+5%' },
  ];

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-dashboard">
        {stats.map((stat, index) => (
          <div key={index} className="bg-white rounded-xl p-6 shadow-lg">
            <div className="flex flex-col gap-dashboard-inner">
              <h3 className="text-gray-500 text-sm font-medium">{stat.title}</h3>
              <div className="flex justify-between items-end">
                <span className="text-3xl font-bold">{stat.value}</span>
                <span className="text-green-500 text-sm font-semibold">
                  {stat.trend}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Product Features Grid with Variable Gap Spacing

This example demonstrates a product features grid with different gap values for vertical and horizontal spacing.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductFeatures() {
  const features = [
    {
      icon: 'https://images.unsplash.com/photo-1682687220199-d0124f48f95b',
      title: 'Cloud Storage',
      description: 'Secure and scalable storage solutions for your data'
    },
    {
      icon: 'https://images.unsplash.com/photo-1682687220198-88e9bdea9931',
      title: 'Analytics',
      description: 'Comprehensive insights and reporting tools'
    },
    {
      icon: 'https://images.unsplash.com/photo-1682687220777-2c60708d6889',
      title: 'Authentication',
      description: 'Advanced security and user management'
    },
    {
      icon: 'https://images.unsplash.com/photo-1682687220795-796d3f6f7000',
      title: 'API Access',
      description: 'Flexible integration options for developers'
    },
  ];

  return (
    <div className="container mx-auto py-16 px-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-y-features-y gap-x-features-x">
        {features.map((feature, index) => (
          <div key={index} className="flex items-start space-x-4">
            <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
              <img
                src={feature.icon}
                alt={feature.title}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Try to apply the same gap value across reusable sections like galleries, cards, and lists. Consider defining reusable classes or components if you frequently use similar grid structures with identical gaps, thus avoiding redundancy in styles. For example, you can style galleries with gap-4 universally and maintain alignment throughout your UI.

As you maintain consistency, test your layout at different resolutions to ensure the intended design persists. Tailwind's responsive utilities allow you to scale gaps dynamically across screen sizes. Add responsive breakpoints like lg:gap-* to balance white space on smaller screens while staying true to your design system.

Balance with Other Layout Properties

Effective layout structures stem from skillfully combining gap utilities with complementary properties like padding, margin, and space-x or space-y. Maintaining an equilibrium ensures sufficient separation between elements without sacrificing the connectedness of the design. For instance, you can balance gap utilities within a grid structure, while edges of the grid contain precise padding values for spacing the entire section.

Use gap with aspect-ratio and image utilities like object-cover or object-contain to ensure your image containers remain proportional even in highly dynamic layouts. For instance:

This is a live editor. Play around with it!
export default function BalancedImageGrid() {
  return (
    <div className="grid grid-cols-3 gap-4 p-6">
      {Array.from({ length: 6 }).map((_, index) => (
        <div
          key={index}
          className="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden shadow-md"
        >
          <img
            src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
            alt={`Grid ${index + 1}`}
            className="object-cover w-full h-full"
          />
        </div>
      ))}
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Appropriate spacing facilitated through gap utilities enhances the readability and navigability of content, benefiting users with diverse needs. Proper gaps avoid clutter while allowing users to distinguish between related and unrelated content effectively. For example, cards separated by gap-6 create visual breathing room between sections, preventing sensory overload.

When constructing layouts like forms, applying adequate vertical gaps between elements such as input fields and buttons reduces cognitive load, especially for users relying on screen magnification tools. For example, spacing between form inputs set with gap-y-4 ensures input groups are easily scannable.

In your designs, experiment with gap increments to identify an optimal balance—too little can overwhelm users, while excessive spacing can dilute the connections between elements. Pair accessible spacings with clear typography and structured headings to further enhance usability.

Support Accessible Interactive Elements

Interactive elements like button groups or card layouts benefit significantly from precise gap spacing, ensuring that both touch and keyboard navigation is usable. Spacing interactive elements like buttons using a gap between them improves usability for large screens and touch devices.

This is a live editor. Play around with it!
export default function AccessibleForm() {
  return (
    <form className="grid gap-y-6 p-8">
      <label className="block">
        <span className="text-gray-700 font-medium">Email Address</span>
        <input
          type="email"
          className="block w-full mt-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2"
        />
      </label>
      <label className="block">
        <span className="text-gray-700 font-medium">Password</span>
        <input
          type="password"
          className="block w-full mt-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2"
        />
      </label>
      <button type="submit" className="w-full py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
        Submit
      </button>
    </form>
  );
}

Debugging Common Issues

Handle Nested Element Challenges

Complicated hierarchy layouts often present challenges like overlapping nested gaps between parent-child containers. When dealing with deeply nested grids or flex containers, ensure that parent and child gap properties complement rather than conflict. One approach could be explicitly defining gaps for child containers while leaving parents gap-neutral.

This ensures gaps do not double-apply unintentionally—a frequent issue when conflicting parent-child gap layers exist. Add logical resets (gap-0) if redundant gaps occur within specific nesting contexts.

Align ItemsOrder

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy