Introduction
Tutorial
Browser Support
Aspect Ratio
Position
Menu

Tailwind CSS Grid Column

Grid Column in CSS refers to how an item in a grid layout is placed across horizontal tracks. By defining explicit column boundaries, you can easily control how many columns an element spans and where it begins or ends within the grid. Tailwind includes a variety of column-based classes that enable you to quickly specify column start and end positions.

In this guide, we will learn how to effectively work with these utilities in Tailwind CSS, their conditional & responsive application, and how to use custom grid-column utilities.

ClassPropertiesExample
col-autogrid-column: auto;<div className="col-auto"></div>
col-span-1grid-column: span 1 / span 1;<div className="col-span-1"></div>
col-span-2grid-column: span 2 / span 2;<div className="col-span-2"></div>
col-span-3grid-column: span 3 / span 3;<div className="col-span-3"></div>
col-span-4grid-column: span 4 / span 4;<div className="col-span-4"></div>
col-span-5grid-column: span 5 / span 5;<div className="col-span-5"></div>
col-span-6grid-column: span 6 / span 6;<div className="col-span-6"></div>
col-span-7grid-column: span 7 / span 7;<div className="col-span-7"></div>
col-span-8grid-column: span 8 / span 8;<div className="col-span-8"></div>
col-span-9grid-column: span 9 / span 9;<div className="col-span-9"></div>
col-span-10grid-column: span 10 / span 10;<div className="col-span-10"></div>
col-span-11grid-column: span 11 / span 11;<div className="col-span-11"></div>
col-span-12grid-column: span 12 / span 12;<div className="col-span-12"></div>
col-span-fullgrid-column: 1 / -1;<div className="col-span-full"></div>
col-start-1grid-column-start: 1;<div className="col-start-1"></div>
col-start-2grid-column-start: 2;<div className="col-start-2"></div>
col-start-3grid-column-start: 3;<div className="col-start-3"></div>
col-start-4grid-column-start: 4;<div className="col-start-4"></div>
col-start-5grid-column-start: 5;<div className="col-start-5"></div>
col-start-6grid-column-start: 6;<div className="col-start-6"></div>
col-start-7grid-column-start: 7;<div className="col-start-7"></div>
col-start-8grid-column-start: 8;<div className="col-start-8"></div>
col-start-9grid-column-start: 9;<div className="col-start-9"></div>
col-start-10grid-column-start: 10;<div className="col-start-10"></div>
col-start-11grid-column-start: 11;<div className="col-start-11"></div>
col-start-12grid-column-start: 12;<div className="col-start-12"></div>
col-start-13grid-column-start: 13;<div className="col-start-13"></div>
col-start-autogrid-column-start: auto;<div className="col-start-auto"></div>
col-end-1grid-column-end: 1;<div className="col-end-1"></div>
col-end-2grid-column-end: 2;<div className="col-end-2"></div>
col-end-3grid-column-end: 3;<div className="col-end-3"></div>
col-end-4grid-column-end: 4;<div className="col-end-4"></div>
col-end-5grid-column-end: 5;<div className="col-end-5"></div>
col-end-6grid-column-end: 6;<div className="col-end-6"></div>
col-end-7grid-column-end: 7;<div className="col-end-7"></div>
col-end-8grid-column-end: 8;<div className="col-end-8"></div>
col-end-9grid-column-end: 9;<div className="col-end-9"></div>
col-end-10grid-column-end: 10;<div className="col-end-10"></div>
col-end-11grid-column-end: 11;<div className="col-end-11"></div>
col-end-12grid-column-end: 12;<div className="col-end-12"></div>
col-end-13grid-column-end: 13;<div className="col-end-13"></div>
col-end-autogrid-column-end: auto;<div className="col-end-auto"></div>

Overview of Grid Column

Spanning multiple columns

When you want an element to extend horizontally across multiple grid tracks, you can specify a column span. For instance, col-span-2 instructs the element to occupy two columns. This is especially handy if you have content that naturally grows wider than surrounding elements or when you want a highlight section that is visually distinct by spanning a greater width.

This is a live editor. Play around with it!
export default function ColSpanning() {
  return (
    <div className="w-screen h-screen bg-gray-50 p-6">
      <div className="grid grid-cols-3 grid-rows-4 gap-4">
        <div className="col-span-3 bg-orange-400 flex items-center justify-center px-2">
          {/* col-span-5 => grid-column: span 5 / span 5 */}
          <p>Five columns wide</p>
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
          <p className="p-1">One column wide</p>
        </div>
        <div className="bg-yellow-300 flex col-span-2 items-center justify-center px-2">
          <p>Two columns wide</p>
        </div>
        <div className="bg-yellow-500 flex items-center justify-center col-span-3">
          <p className="p-1">Three columns wide</p>
        </div>
        <div className="bg-yellow-300 flex items-center justify-center">
          <p className="p-1">One column wide</p>
        </div>
      </div>
    </div>
  );
}

Adding the start and end lines

For even finer control, Tailwind offers utilities for specifying explicit start and end line numbers. This provides a direct mapping to CSS properties like:

  • grid-column-start: <line>
  • grid-column-end: <line>

By assigning col-start-* and col-end-*, you don't necessarily have to rely on span. You can explicitly target column lines in the grid, e.g., start at column 1 and end at column 3 (col-start-1 col-end-3).

This is a live editor. Play around with it!
export default function ColumnLines() {
  return (
    <div className="w-screen h-screen bg-gray-50 p-8">
      <div className="grid grid-cols-4 grid-rows-4 gap-4">
        <div className="col-start-1 col-end-5 bg-orange-400 flex items-center justify-center px-2">
          {/* grid-column-start: 1; grid-column-end: 5 */}
          <p>Starts at 1 and Ends at 5 </p>
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
          <p className="p-1 text-xs">Default Spanning</p>
        </div>
        <div className="bg-yellow-300 flex col-start-2 col-end-5 items-center justify-center px-2">
          {/* grid-column-start: 2; grid-column-end: 5 */}
          <p>Starts at 2 and Ends at 5</p>
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
          <p className="p-1 text-xs">Default Spanning</p>
        </div>
        <div className="bg-yellow-500 flex items-center justify-center col-start-3 col-end-5">
          {/* grid-column-start: 3; grid-column-end: 5 */}
          <p className="p-1">Starts at 3 and ends at 5</p>
        </div>
      </div>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind’s modifiers such as hover and focus, let you adapt an element’s column positioning upon user interaction. You can, for instance, cause an element to shift its column start on hover or span multiple columns only on focus.

This is a live editor. Play around with it!
export default function InteractiveGrid() {
  return (
    <div className="w-screen h-screen bg-gray-50 p-6">
      <p className="underline px-4 text-center pb-6">Hover on the below items to change their spanning columns</p>
      <div className="grid grid-cols-4 grid-rows-3 gap-4">
        <div className="hover:col-span-4 bg-orange-400 flex items-center justify-center px-2">
          {/* On hover => grid-column: span 4 / span 4 */}
          <p>Hover on this item</p>
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
        </div>
        {/* On hover => grid-column: span 2 / span 2 */}
        <div className="bg-yellow-300 flex hover:col-span-2 items-center justify-center px-2">
          <p>Hover on this item</p>
        </div>
        <div className="bg-yellow-300 flex items-center justify-center">
        </div>
        {/* On hover => grid-column: span 3 / span 3 */}
        <div className="bg-yellow-500 flex items-center justify-center hover:col-span-3">
          <p className="p-1">Hover on this item</p>
        </div>
      </div>
    </div>
  );
}

Breakpoint Modifiers

Tailwind CSS provides breakpoint modifiers to conditionally apply the utility only when the screen hits the defined breakpoint. This is especially helpful for changing the grid-column only on specific screens. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the utility only on these breakpoints and above.

This is a live editor. Play around with it!
export default function ResponsiveGrid() {
  return (
    <div className="w-screen h-screen bg-gray-50 p-6">
      <p className="underline px-4 text-center pb-6">The spanning columns of the below items will change as per the screen</p>
      <div className="grid grid-cols-3 grid-rows-4 gap-4">
        {/* On md => grid-column: span 2 / span 2 */}
        <div className="md:col-span-2 bg-orange-400 flex items-center justify-center px-2">
          <p className="text-sm p-2">Column spanning will change on <code>md</code></p>
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
        </div>
        <div className="bg-yellow-300 flex items-center justify-center px-2">
        </div>
        <div className="bg-yellow-300 flex items-center justify-center">
        </div>
        <div className="bg-yellow-500 flex items-center justify-center">
        </div>
      </div>
    </div>
  );
}

Custom Grid Row

Extending the Theme

Tailwind’s configuration file (tailwind.config.js) allows you to extend or override the default theme values for column-based utilities. By customizing the theme, you can define new column spans or line start/end values that match your project’s unique design system.

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

export default function ExtendedColumns() {
  return (
    <div className="bg-gray-50 p-8 h-screen">
      <p className="underline px-2 text-center pb-6">The below item uses a custom spanning utility</p>
      <div className="grid grid-cols-14 grid-rows-2 gap-1">
        <div className="bg-orange-400 flex items-center justify-center px-2">
         
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">

        </div>
        <div className="bg-yellow-300 flex items-center justify-center px-2">
          
        </div>
        <div className="bg-yellow-300 flex items-center justify-center">
        
        </div>
        <div className="bg-yellow-500 flex items-center justify-center col-span-14">
          {/* Custom column-span-14 utility  */}
          <p className="p-1">Custom Spanning</p>
        </div>
      </div>
    </div>
  );
}

Using Arbitrary Values

In addition to theme extension, Tailwind offers arbitrary values for utilities. This is particularly advantageous when you need to quickly experiment with new grid line configurations without editing your theme configuration. Arbitrary values let you specify the property value inline using a square bracket syntax.

This is a live editor. Play around with it!
export default function ArbitraryValuesDemo() {
  return (
    <div className="w-screen bg-gray-50 p-8">
      <p className="underline px-2 text-center pb-6">The below item uses a arbitrary spanning utility</p>
      <div className="grid grid-rows-2 grid-cols-[repeat(14,minmax(0,1fr))] gap-2">
        <div className="bg-orange-400 flex items-center justify-center px-2">
          
        </div>
        <div className="bg-yellow-200 flex items-center justify-center">
          
        </div>
        <div className="bg-yellow-300 flex items-center justify-center px-2">
          
        </div>
        <div className="bg-yellow-300 flex items-center justify-center">
          
        </div>
        <div className="bg-yellow-500 flex items-center justify-center col-[span_14_/_span_14]">
          {/* Arbitrary col-span-14 utility  */}
          <p className="p-1">Arbitrary Spanning</p>
        </div>
      </div>
    </div>
  );
}

Real World Examples

Recipe Collection

A food blog layout with recipe cards spanning different columns based on popularity.

This is a live editor. Play around with it!
const RecipeCollection = () => {
  const recipes = [
    {
      id: 1,
      title: "Sourdough Bread",
      time: "24h",
      isPopular: true,
      src: "https://images.unsplash.com/photo-1555951015-6da899b5c2cd",
      alt: "Sourdough bread",
      cuisine: "Artisan",
      ratings: 4.9
    },
    {
      id: 2,
      title: "Thai Curry",
      time: "45m",
      isPopular: true,
      src: "https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd",
      alt: "Thai curry",
      cuisine: "Thai",
      ratings: 4.8
    },
    {
      id: 3,
      title: "Tiramisu",
      time: "4h",
      isPopular: false,
      src: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9",
      alt: "Tiramisu",
      cuisine: "Italian",
      ratings: 4.7
    },
    {
      id: 4,
      title: "Sushi Rolls",
      time: "30m",
      isPopular: false,
      src: "https://images.unsplash.com/photo-1579871494447-9811cf80d66c",
      alt: "Sushi rolls",
      cuisine: "Japanese",
      ratings: 4.5
    },
    {
      id: 5,
      title: "Pizza",
      time: "1.5h",
      isPopular: false,
      src: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002",
      alt: "Pizza",
      cuisine: "Italian",
      ratings: 4.6
    },
    {
      id: 6,
      title: "Beef Wellington",
      time: "3h",
      isPopular: false,
      src: "https://images.unsplash.com/photo-1600891964092-4316c288032e",
      alt: "Beef wellington",
      cuisine: "British",
      ratings: 4.9
    }
  ];

  return (
    <div className="p-2 bg-stone-50">
      <div className="grid grid-cols-2 gap-2 m-2">
        {recipes.map(recipe => (
          <div
            key={recipe.id}
            className={`
              bg-white rounded-lg overflow-hidden shadow-sm
              ${recipe.isPopular ? 'col-span-2' : 'col-span-1'}
            `}
          >
            <div className="relative">
              <img
                src={recipe.src}
                alt={recipe.alt}
                className={`w-full object-cover ${recipe.isPopular ? 'h-32' : 'h-24'}`}
              />
              <div className="absolute top-1 right-1 bg-white/90 px-1.5 py-0.5 rounded-full text-xs">
                ★ {recipe.ratings}
              </div>
            </div>
            <div className="p-2">
              <div className="flex items-center justify-between mb-1">
                <span className="text-xs text-emerald-600">{recipe.cuisine}</span>
                <span className="text-xs text-gray-500">{recipe.time}</span>
              </div>
              <h3 className="font-medium text-sm truncate">{recipe.title}</h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeCollection;

Product Showcase Grid

A responsive e-commerce product grid layout that spans items across different columns for featured products.

This is a live editor. Play around with it!
const ProductShowcase = () => {
  const products = [
    {
      id: 1,
      name: "Headphones Pro",
      price: "$299",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Headphones"
    },
    {
      id: 2,
      name: "Smart Watch",
      price: "$199",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch"
    },
    {
      id: 3,
      name: "Keyboard",
      price: "$149",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "Keyboard"
    },
    {
      id: 4,
      name: "4K Monitor",
      price: "$699",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf",
      alt: "Monitor"
    },
    {
      id: 5,
      name: "Gaming Mouse",
      price: "$89",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1615663245857-ac93bb7c39e7",
      alt: "Mouse"
    },
    {
      id: 6,
      name: "USB-C Dock",
      price: "$199",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1625842268584-8f3296236761",
      alt: "Dock"
    }
  ];

  return (
    <div className="p-2 bg-gray-50">
      <div className="grid grid-cols-2 gap-2">
        {products.map(product => (
          <div
            key={product.id}
            className={`bg-white rounded-lg shadow-sm overflow-hidden
              ${product.isFeatured ? 'col-span-2' : 'col-span-1'}`}
          >
            <img
              src={product.src}
              alt={product.alt}
              className={`w-full object-cover ${product.isFeatured ? 'h-32' : 'h-24'}`}
            />
            <div className="p-2">
              <h3 className="text-sm font-medium truncate">{product.name}</h3>
              <p className="text-xs text-gray-600 mt-0.5">{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductShowcase;

Portfolio Gallery

A creative portfolio layout using varying column spans to create an engaging masonry-like grid.

This is a live editor. Play around with it!
const PortfolioGallery = () => {
  const projects = [
    {
      id: 1,
      title: "Brand Design",
      category: "Branding",
      size: "large",
      src: "https://images.unsplash.com/photo-1561070791-2526d30994b5",
      alt: "Brand design"
    },
    {
      id: 2,
      title: "Mobile App",
      category: "UI/UX",
      size: "medium",
      src: "https://images.unsplash.com/photo-1512486130939-2c4f79935e4f",
      alt: "Mobile app"
    },
    {
      id: 3,
      title: "Photography",
      category: "Photo",
      size: "small",
      src: "https://images.unsplash.com/photo-1542744094-3a31f272c490",
      alt: "Product photo"
    },
    {
      id: 4,
      title: "Web Design",
      category: "Web",
      size: "small",
      src: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d",
      alt: "Website"
    },
    {
      id: 5,
      title: "3D Motion",
      category: "Motion",
      size: "medium",
      src: "https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2",
      alt: "3D animation"
    },
    {
      id: 6,
      title: "Print Ad",
      category: "Print",
      size: "large",
      src: "https://images.unsplash.com/photo-1626785774573-4b799315345d",
      alt: "Print ad"
    }
  ];

  return (
    <div className="p-2 bg-gray-900">
      <div className="grid grid-cols-3 gap-2">
        {projects.map(project => (
          <div
            key={project.id}
            className={`
              group relative rounded-lg overflow-hidden
              ${project.size === 'large' ? 'col-span-3' : ''}
              ${project.size === 'medium' ? 'col-span-2' : ''}
              ${project.size === 'small' ? 'col-span-1' : ''}
            `}
          >
            <img
              src={project.src}
              alt={project.alt}
              className="w-full h-24 object-cover"
            />
            <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <div className="absolute bottom-0 p-2">
                <span className="text-[10px] text-white/70">{project.category}</span>
                <h3 className="text-white text-xs font-medium">{project.title}</h3>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PortfolioGallery;

News Article Grid

A news website layout with featured articles spanning multiple columns for better visual hierarchy.

This is a live editor. Play around with it!
const NewsGrid = () => {
  const articles = [
    {
      id: 1,
      title: "Future of Energy",
      category: "Tech",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9",
      alt: "Solar panels"
    },
    {
      id: 2,
      title: "Economic Summit",
      category: "Business",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1507679799987-c73779587ccf",
      alt: "Business meeting"
    },
    {
      id: 3,
      title: "Space Mission",
      category: "Science",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1446776877081-d282a0f896e2",
      alt: "Space rocket"
    },
    {
      id: 4,
      title: "AI in Health",
      category: "Health",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1576671081837-49000212a370",
      alt: "Medical research"
    },
    {
      id: 5,
      title: "Art Festival",
      category: "Arts",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819",
      alt: "Festival"
    },
    {
      id: 6,
      title: "Sports Final",
      category: "Sports",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1461896836934-ffe607ba8211",
      alt: "Sports event"
    }
  ];

  return (
    <div className="p-2 bg-white">
      <div className="grid grid-cols-2 gap-2">
        {articles.map(article => (
          <div
            key={article.id}
            className={`
              relative rounded-lg overflow-hidden
              ${article.isFeatured ? 'col-span-2' : 'col-span-1'}
            `}
          >
            <img
              src={article.src}
              alt={article.alt}
              className={`w-full object-cover ${article.isFeatured ? 'h-32' : 'h-24'}`}
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-2 flex flex-col justify-end">
              <span className="text-[10px] text-white/80">{article.category}</span>
              <h3 className={`text-white font-medium ${article.isFeatured ? 'text-sm' : 'text-xs'} line-clamp-2`}>
                {article.title}
              </h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default NewsGrid;

Dashboard Layout

A modern dashboard layout with widgets spanning different columns based on their importance and data density.

This is a live editor. Play around with it!
const DashboardLayout = () => {
  const widgets = [
    {
      id: 1,
      title: "Revenue",
      type: "chart",
      priority: "high",
      icon: "📈",
      value: "$128.4k",
      change: "+12.3%",
      trend: "up",
      subtext: "vs last month"
    },
    {
      id: 2,
      title: "Users",
      type: "metric",
      priority: "medium",
      icon: "👥",
      value: "8.2k",
      change: "+5.2%",
      trend: "up",
      subtext: "Online now"
    },
    {
      id: 3,
      title: "Orders",
      type: "list",
      priority: "low",
      icon: "📦",
      value: "156",
      change: "-2.1%",
      trend: "down",
      subtext: "24h"
    },
    {
      id: 4,
      title: "Rating",
      type: "gauge",
      priority: "high",
      icon: "⭐",
      value: "4.8",
      change: "+0.2",
      trend: "up",
      subtext: "2.4k reviews"
    },
    {
      id: 5,
      title: "Products",
      type: "table",
      priority: "low",
      icon: "🛍️",
      value: "1.2k",
      change: "+15",
      trend: "up",
      subtext: "Active"
    },
    {
      id: 6,
      title: "Status",
      type: "status",
      priority: "low",
      icon: "✅",
      value: "98.9%",
      change: "-0.1%",
      trend: "stable",
      subtext: "Uptime"
    }
  ];

  return (
    <div className="p-2 bg-gray-50 max-w-[350px]">
      <div className="grid grid-cols-2 gap-2">
        {widgets.map(widget => (
          <div
            key={widget.id}
            className={`
              bg-white rounded-lg p-2.5 shadow-sm
              ${widget.priority === 'high' ? 'col-span-2 row-span-2' : 'col-span-1'}
            `}
          >
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between mb-1.5">
                <div className="flex items-center gap-1">
                  <span className="text-base">{widget.icon}</span>
                  <span className="text-xs text-gray-600">{widget.title}</span>
                </div>
                <div className={`
                  text-[10px] px-1.5 py-0.5 rounded-full
                  ${widget.trend === 'up' ? 'bg-green-100 text-green-700' : ''}
                  ${widget.trend === 'down' ? 'bg-red-100 text-red-700' : ''}
                  ${widget.trend === 'stable' ? 'bg-blue-100 text-blue-700' : ''}
                `}>
                  {widget.change}
                </div>
              </div>
              
              <div>
                <span className={`
                  font-semibold
                  ${widget.priority === 'high' ? 'text-xl' : 'text-lg'}
                `}>
                  {widget.value}
                </span>
                <div className="text-[10px] text-gray-500">{widget.subtext}</div>
              </div>

              {widget.priority === 'high' && (
                <div className="mt-2 pt-2 border-t border-gray-100">
                  <div className="space-y-1">
                    <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-blue-500 rounded-full" style={{ width: '70%' }}></div>
                    </div>
                    <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-blue-500 rounded-full" style={{ width: '55%' }}></div>
                    </div>
                    <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-blue-500 rounded-full" style={{ width: '85%' }}></div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DashboardLayout;

Customization Examples

Dashboard Cards

A compact dashboard layout where statistics cards span different columns in a narrow viewport.

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

const MiniDashboard = () => {
  return (
    <div className="grid grid-cols-4 gap-2 p-2 bg-gray-50">
      <div className="col-span-medium bg-white rounded p-3 shadow-sm">
        <h3 className="text-sm font-semibold">Total Revenue</h3>
        <p className="text-lg font-bold">$12,450</p>
      </div>
      
      <div className="col-span-small bg-white rounded p-3 shadow-sm">
        <h3 className="text-sm font-semibold">Orders</h3>
        <p className="text-lg font-bold">124</p>
      </div>
      
      <div className="col-span-small bg-white rounded p-3 shadow-sm">
        <h3 className="text-sm font-semibold">Users</h3>
        <p className="text-lg font-bold">847</p>
      </div>
    </div>
  );
};

export default MiniDashboard;

Quick Actions Grid

A compact grid of action buttons with varying widths for emphasis.

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

// App.js
const QuickActions = () => {
  return (
    <div className="grid grid-cols-4 gap-2 p-2">
      <button className="col-span-medium bg-blue-500 text-white p-2 rounded">
        Create New Post
      </button>
      <button className="col-span-small bg-gray-200 p-2 rounded">
        Draft
      </button>
      <button className="col-span-small bg-gray-200 p-2 rounded">
        Schedule
      </button>
      <button className="col-span-small bg-gray-200 p-2 rounded">
        Media
      </button>
      <button className="col-span-small bg-gray-200 p-2 rounded">
        Settings
      </button>
    </div>
  );
};

export default QuickActions;

Notification List

A notification feed with different types of alerts spanning varying columns.

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

const NotificationList = () => {
  return (
    <div className="grid grid-cols-6 gap-2 p-2">
      <div className="col-span-wide bg-red-100 p-2 rounded">
        <h3 className="text-sm font-semibold text-red-800">System Alert</h3>
        <p className="text-xs text-red-600">Maintenance scheduled in 2 hours</p>
      </div>
      <div className="col-span-narrow bg-blue-100 p-2 rounded">
        <h3 className="text-sm font-semibold text-blue-800">Message</h3>
        <p className="text-xs text-blue-600">2 new replies</p>
      </div>
      <div className="col-span-narrow bg-green-100 p-2 rounded">
        <h3 className="text-sm font-semibold text-green-800">Update</h3>
        <p className="text-xs text-green-600">Task completed</p>
      </div>
    </div>
  );
};

export default NotificationList;

Best Practices

Maintain Design Consistency

Consistency in grid layouts is crucial to creating a seamless user experience. When applying Tailwind CSS's col-span-*, col-start-*, and col-end-* utilities, it's important to define a structured approach to grid layouts across your project. Establishing a design system or a grid template ensures that elements align predictably and maintain uniform spacing. Instead of arbitrarily applying column spans, consider defining a standard grid pattern that applies to multiple sections of your layout.

One way to ensure uniformity is to create reusable grid container components. These components encapsulate predefined column behaviors, making them easy to apply and maintain throughout the project. For example, a consistent card layout may use col-span-4 for medium screens and col-span-12 for smaller viewports, ensuring a harmonious look across devices. This approach minimizes unexpected layout shifts and preserves the design language.

Build Responsive Design

When using Tailwind’s grid column utilities, it's important to ensure layouts adjust smoothly across different screen sizes. You can do this by applying responsive variants like sm:col-span-*, md:col-span-*, and lg:col-span-*, which help prevent content from feeling too cramped on small screens or too spread out on large displays.

Additionally, pair grid-cols-* with col-span-* and responsive modifiers to adapt layouts dynamically to the viewport width, ensuring a smooth transition between desktop and mobile views. This approach keeps your design flexible and well-structured across all devices.

Accessibility Considerations

Enhance Readability and Navigability

Proper use of col-span-* can significantly improve content readability and navigation. Ensuring that important content maintains a balanced column width prevents excessively long line lengths, which can hinder readability. Using a larger col-span value for text-heavy sections ensures that line lengths remain within an optimal range, making it easier for users to read without excessive horizontal scanning.

For better accessibility, arrange grid columns in a logical reading order that follows a clear visual hierarchy. Placing key content in consistent locations helps users, especially those using screen readers, navigate smoothly without confusion.

Focus on High Contrast

Contrast is important for accessibility, and col-span-* helps create layouts that clearly separate elements. Using larger column spans for key content improves visibility, especially for visually impaired users.

Combining col-span-* with bg-* and border-* utilities further enhances contrast, making sections stand out. For example, a col-span-3 sidebar next to a col-span-9 content area with distinct background colors ensures clear separation.

This approach improves overall usability by providing a well-structured and accessible design.

Grid RowGrid Auto Flow

Resources

BlogDocsTailwindEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy