Tailwind CSS Grid Template Rows
Grid Template Rows defines the heights of the rows in a grid container, enabling you to build layouts that are flexible, maintainable, and easy to extend. Tailwind provides a wide range of utilities to manage the row definitions of your grid, allowing you to control everything from basic row configurations to advanced nesting scenarios within the same codebase.
In this guide, we will explore how to use Grid Template Rows utilities in Tailwind CSS, covering everything from fundamental concepts to advanced customization techniques.
Class | Properties | Example |
---|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); | <div className="grid-rows-1"></div> |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); | <div className="grid-rows-2"></div> |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); | <div className="grid-rows-3"></div> |
grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); | <div className="grid-rows-4"></div> |
grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); | <div className="grid-rows-5"></div> |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); | <div className="grid-rows-6"></div> |
grid-rows-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); | <div className="grid-rows-7"></div> |
grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); | <div className="grid-rows-8"></div> |
grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); | <div className="grid-rows-9"></div> |
grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); | <div className="grid-rows-10"></div> |
grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); | <div className="grid-rows-11"></div> |
grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); | <div className="grid-rows-12"></div> |
grid-rows-none | grid-template-rows: none; | <div className="grid-rows-none"></div> |
grid-rows-subgrid | grid-template-rows: subgrid; | <div className="grid-rows-subgrid"></div> |
Overview of Grid Template Rows
Adding the Grid Template Rows
To define the number of rows in grid, use Tailwind's grid-rows-*
utilities like- grid-rows-2
, grid-rows-3
, grid-rows-4
, etc.
export default function App() { return ( <div className="grid grid-rows-3 gap-4 h-screen w-screen bg-gray-100 p-8"> <div className="bg-blue-500 text-white p-4">Row 1</div> <div className="bg-green-500 text-white p-4">Row 2</div> <div className="bg-yellow-500 text-white p-4">Row 3</div> </div> ); }
Subgrid Support
To define sub-grids within parent grid items, use grid-rows-subgrid
.
export default function SubgridDemo() { return ( <div className="grid grid-rows-8 gap-6 h-screen w-screen p-8 bg-gray-50"> <div className="bg-orange-400" /> <div className="bg-red-400" /> <div class="grid grid-rows-subgrid gap-4 row-span-3 bg-zinc-300 border-2 border-black border-dashed"> <div className="bg-indigo-400" /> <div className="bg-indigo-400" /> <div className="bg-indigo-400" /> </div> <div className="bg-yellow-400" /> <div className="bg-pink-400" /> <div className="bg-blue-400" /> </div> ); }
States and Responsiveness
Hover and Focus States
Just like other Tailwind properties, you can adapt Grid Template Row behavior to hover, focus, or other interactive states. This ensures your layout can dynamically alter row definitions when a user interacts with certain elements.
To define grid rows on states like hover and focus, use hover
and focus
modifiers, e.g., hover:grid-rows-3
, focus:grid-rows-4
, etc.
export default function HoverGrid() { return ( <div className="h-screen w-screen flex justify-center items-center flex-col text-center px-12 gap-6"> <p className="underline">Hover on the below container to change the grid rows</p> <div className="grid grid-rows-3 hover:grid-rows-6 bg-gray-100 h-72 w-72"> <div className="bg-purple-400" /> <div className="bg-fuchsia-400" /> <div className="bg-indigo-400" /> </div> </div> ); }
Breakpoint Modifiers
Building responsive layouts often means adjusting the number and sizes of rows for different screen widths. Tailwind provides breakpoint-specific prefixes for utility classes. You can do something similar with the grid-template-rows property, switching from one arrangement to another based on device size.
To define grid rows based on the device breakpoint, use the breakpoint modifiers(sm
, md
, etc.), e.g., md:grid-rows-6
.
export default function ResponsiveGrid() { return ( <div className="h-screen w-screen flex justify-center items-center flex-col text-center px-6 pt-6 gap-4"> <p className="underline">The below container will have different number of rows based on the breakpoint</p> <div className="grid grid-rows-1 md:grid-rows-3 lg:grid-rows-6 gap-4 h-screen w-screen p-8"> <div className="bg-indigo-500" /> <div className="bg-indigo-500" /> <div className="bg-indigo-500" /> </div> </div> ); }
Custom Grid Template Rows
Extending the Theme
To configure custom row setups, you can extend the theme in your tailwind.config.js
file. By doing so, you’ll have a new set of utility classes that directly reflect your unique row definitions. This approach is particularly convenient if you plan to reuse the same row patterns across multiple sections of your application.
Below is a conceptual snippet of a theme extension in tailwind.config.js
:
import tailwindConfig from "./tailwind.config.js"; tailwind.config = tailwindConfig; export default function ExtendedGrid() { return ( <div className="grid grid-rows-custom gap-6 h-screen w-screen bg-gray-200 p-8"> <div className="bg-orange-400 text-white p-4">Custom Row</div> <div className="bg-red-400 text-white p-4">Custom Width</div> </div> ); }
Using Arbitrary Values
Tailwind’s arbitrary value feature allows you to apply custom, one-off styles that are not found in the default or extended configuration. This method gives you immediate flexibility without requiring you to open or modify your Tailwind configuration.
export default function ArbitraryGrid() { return ( <div className="grid grid-rows-[80px_minmax(120px,_2fr)_20px] gap-4 h-screen w-screen bg-teal-100 p-8"> <div className="bg-red-400" /> <div className="bg-orange-400" /> <div className="bg-indigo-400" /> </div> ); }
Real World Examples
Product Showcase Grid
A responsive product grid layout for an e-commerce store featuring electronics items with image, title, price, and rating.
const ProductShowcase = () => { const products = [ { title: "Premium Wireless Headphones", price: "$299", rating: 4.8, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e", alt: "Wireless headphones in matte black" }, { title: "Smart Fitness Watch", price: "$199", rating: 4.6, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30", alt: "Modern fitness watch" }, { title: "Portable Speaker", price: "$149", rating: 4.7, image: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1", alt: "Bluetooth speaker in gray" }, { title: "Wireless Earbuds", price: "$179", rating: 4.5, image: "https://images.unsplash.com/photo-1606220945770-b5b6c2c55bf1", alt: "White wireless earbuds" }, { title: "Gaming Mouse", price: "$89", rating: 4.9, image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46", alt: "RGB gaming mouse" }, { title: "Mechanical Keyboard", price: "$159", rating: 4.7, image: "https://images.unsplash.com/photo-1601445638532-3c6f6c3aa1d6", alt: "RGB mechanical keyboard" } ]; return ( <div className="p-4 bg-gray-50"> <div className="grid grid-cols-2 grid-rows-3 gap-4"> {products.map((product, index) => ( <div key={index} className="bg-white rounded-lg shadow-md p-4"> <img src={product.image} alt={product.alt} className="w-full h-32 object-cover rounded-md" /> <h3 className="mt-2 text-lg font-semibold">{product.title}</h3> <div className="flex justify-between items-center mt-2"> <span className="text-blue-600 font-bold">{product.price}</span> <span className="text-yellow-500">★ {product.rating}</span> </div> </div> ))} </div> </div> ); }; export default ProductShowcase;
Team Directory
A team directory layout displaying team members with their roles and contact information.
const TeamDirectory = () => { const teamMembers = [ { name: "Sarah Hill", role: "Product Manager", email: "sarah.j@company.com", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", alt: "Sarah Johnson profile photo", department: "Product" }, { name: "Michael Chen", role: "Senior Developer", email: "michael.c@company.com", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d", alt: "Michael Chen profile photo", department: "Engineering" }, { name: "Emma Davis", role: "UX Designer", email: "emma.d@company.com", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80", alt: "Emma Davis profile photo", department: "Design" }, { name: "James Wilson", role: "Marketing Lead", email: "james.w@company.com", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e", alt: "James Wilson profile photo", department: "Marketing" }, { name: "Lisa Martinez", role: "Sales Director", email: "lisa.m@company.com", image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e", alt: "Lisa Martinez profile photo", department: "Sales" }, { name: "David Kim", role: "Customer Success", email: "david.k@company.com", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", alt: "David Kim profile photo", department: "Support" } ]; return ( <div className="p-6 bg-gray-100"> <div className="grid grid-cols-2 grid-rows-3 gap-6"> {teamMembers.map((member, index) => ( <div key={index} className="bg-white rounded-xl p-4 flex flex-col gap-1"> <img src={member.image} alt={member.alt} className="w-20 h-20 rounded-full object-cover" /> <h3 className="mt-3 font-semibold text-md">{member.name}</h3> <span className="text-sm text-gray-600">{member.role}</span> <span className="text-xs text-gray-500 mt-1">{member.department}</span> <a href={`mailto:${member.email}`} className="mt-2 break-words text-blue-500 text-xs"> {member.email} </a> </div> ))} </div> </div> ); }; export default TeamDirectory;
Featured Photography Grid
A dynamic photography gallery layout with featured images spanning multiple rows, creating a masonry-like effect.
const PhotographyGrid = () => { const photos = [ { id: 1, title: "Mountain Vista", photographer: "Alex Chen", src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4", alt: "Sunrise over mountain peaks", featured: true, span: "row-span-2" }, { id: 2, title: "Urban Life", photographer: "Sarah Kim", src: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000", alt: "City nightscape", featured: false, span: "row-span-2" }, { id: 3, title: "Desert Wanderer", photographer: "Mohammed Al-Said", src: "https://images.unsplash.com/photo-1509316785289-025f5b846b35", alt: "Person walking in desert dunes", featured: false, span: "col-span-2" }, { id: 4, title: "Ocean Depths", photographer: "Maria Garcia", src: "https://images.unsplash.com/photo-1682687982501-1e58ab814714", alt: "Underwater coral reef", featured: false, span: "row-span-2" }, { id: 5, title: "Forest Mist", photographer: "John Doe", src: "https://images.unsplash.com/photo-1511497584788-876760111969", alt: "Misty forest path", featured: true, span: "row-span-2" }, { id: 6, title: "Arctic Wonder", photographer: "Lisa Anderson", src: "https://images.unsplash.com/photo-1520809227329-2f94844a9635", alt: "Northern lights over snow", featured: false, span: "row-span-1" } ]; return ( <div className="p-4 bg-gray-900"> <div className="grid grid-cols-3 grid-rows-5 gap-4 h-[800px]"> {photos.map((photo) => ( <div key={photo.id} className={`group relative overflow-hidden rounded-lg ${photo.span} ${photo.featured ? 'col-span-2' : 'col-span-1'}`} > <img src={photo.src} alt={photo.alt} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" /> <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <div className="absolute bottom-0 left-0 p-4 text-white"> <h3 className="text-xl font-bold mb-1">{photo.title}</h3> <p className="text-sm opacity-90">by {photo.photographer}</p> </div> <div className="absolute top-4 right-4"> <button className="p-2 bg-white/20 rounded-full backdrop-blur-sm hover:bg-white/30 transition-colors"> <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> </svg> </button> </div> </div> </div> ))} </div> </div> ); }; export default PhotographyGrid;
Dynamic Content Feed
A compact social media-style feed with featured posts spanning multiple rows.
const ContentFeed = () => { const posts = [ { id: 1, type: "featured", title: "Mountain Escape", content: "Weekend getaway in the Alps", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4", likes: 234, span: "row-span-2", author: "Alex Hiker" }, { id: 2, type: "text", title: "Quick Update", content: "Just landed my dream job!", likes: 89, span: "row-span-1", author: "Sarah Chen" }, { id: 3, type: "featured", title: "Cafe Vibes", content: "Perfect morning coffee spot", image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085", likes: 156, span: "row-span-2", author: "Coffee Lover" }, { id: 4, type: "text", title: "Tech News", content: "Latest gadget release today", likes: 45, span: "row-span-1", author: "Tech Insider" }, { id: 5, type: "text", title: "Recipe Share", content: "My grandma's secret pasta", likes: 167, span: "row-span-1", author: "Food Master" }, { id: 6, type: "text", title: "Daily Thought", content: "Embrace the journey", likes: 92, span: "row-span-1", author: "Mindful Soul" } ]; return ( <div className="w-[365px] h-[400px] bg-gray-100 p-2"> <div className="grid grid-cols-2 grid-rows-4 gap-2 h-full"> {posts.map((post) => ( <div key={post.id} className={`${post.span} ${ post.type === 'featured' ? 'col-span-1' : 'col-span-1' } bg-white rounded-lg shadow-sm overflow-hidden`} > {post.type === 'featured' ? ( <div className="h-full flex flex-col"> <div className="h-1/2 relative"> <img src={post.image} alt={post.title} className="w-full h-full object-cover" /> </div> <div className="p-2 flex-1 flex flex-col"> <h3 className="font-bold text-sm">{post.title}</h3> <p className="text-xs text-gray-600 mt-1">{post.content}</p> <div className="mt-auto flex items-center justify-between text-xs"> <span className="text-gray-500">{post.author}</span> <div className="flex items-center gap-1"> <span>♥</span> <span>{post.likes}</span> </div> </div> </div> </div> ) : ( <div className="p-2 h-full flex flex-col"> <h3 className="font-bold text-sm">{post.title}</h3> <p className="text-xs text-gray-600 mt-1">{post.content}</p> <div className="mt-auto flex items-center justify-between text-xs"> <span className="text-gray-500">{post.author}</span> <div className="flex items-center gap-1"> <span>♥</span> <span>{post.likes}</span> </div> </div> </div> )} </div> ))} </div> </div> ); }; export default ContentFeed;
Project Board
A compact project management board with tasks spanning different row heights based on priority and content.
const ProjectBoard = () => { const tasks = [ { id: 1, title: "Website Redesign", priority: "high", dueDate: "Tomorrow", span: "row-span-2", status: "in-progress", assignees: ["Sarah K", "Mike L"], progress: 65, description: "Update homepage layout and implement new brand colors across all pages", type: "featured" }, { id: 2, title: "Bug Fixes", priority: "medium", dueDate: "Today", span: "row-span-1", status: "todo", assignees: ["John D"], type: "normal" }, { id: 3, title: "User Research", priority: "high", dueDate: "Next Week", span: "row-span-2", status: "review", assignees: ["Emma R", "Alex M", "Lisa P"], progress: 80, description: "Conduct user interviews and compile findings report", type: "featured" }, { id: 4, title: "Email Campaign", priority: "low", dueDate: "Friday", span: "row-span-1", status: "todo", assignees: ["Tom S"], type: "normal" }, { id: 5, title: "Team Meeting", priority: "medium", dueDate: "Today", span: "row-span-1", status: "todo", assignees: ["All"], type: "normal" }, { id: 6, title: "Content Review", priority: "low", dueDate: "Thursday", span: "row-span-1", status: "backlog", assignees: ["Kate M"], type: "normal" } ]; const getPriorityColor = (priority) => { switch (priority) { case 'high': return 'bg-red-100 text-red-600'; case 'medium': return 'bg-yellow-100 text-yellow-600'; default: return 'bg-blue-100 text-blue-600'; } }; return ( <div className="w-[365px] h-[400px] bg-gray-100 p-2"> <div className="grid grid-cols-2 grid-rows-4 gap-2 h-full"> {tasks.map((task) => ( <div key={task.id} className={`${task.span} ${ task.type === 'featured' ? 'col-span-1' : 'col-span-1' } bg-white rounded-lg shadow-sm overflow-hidden relative`} > <div className="p-2 h-full flex flex-col"> <div className="flex items-start justify-between mb-2"> <h3 className="font-bold text-sm leading-tight">{task.title}</h3> <span className={`text-xs px-2 py-1 rounded-full ${getPriorityColor(task.priority)}`}> {task.priority} </span> </div> {task.type === 'featured' && ( <> <p className="text-xs text-gray-600 mb-2">{task.description}</p> <div className="mb-2"> <div className="h-1.5 bg-gray-200 rounded-full"> <div className="h-full bg-blue-500 rounded-full" style={{ width: `${task.progress}%` }} ></div> </div> </div> </> )} <div className="mt-auto"> <div className="flex items-center justify-between text-xs"> <span className="text-gray-500">Due {task.dueDate}</span> <div className="flex -space-x-1"> {task.assignees.slice(0, 2).map((assignee, index) => ( <div key={index} className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-[10px]" > {assignee.charAt(0)} </div> ))} {task.assignees.length > 2 && ( <div className="w-5 h-5 rounded-full bg-gray-300 flex items-center justify-center text-[10px]"> +{task.assignees.length - 2} </div> )} </div> </div> </div> </div> </div> ))} </div> </div> ); }; export default ProjectBoard;
Customization Examples
Photo Gallery
A responsive photo gallery that uses custom grid rows for an asymmetric layout with smooth scroll snapping.
import tailwindConfig from "./tailwind.config.js"; tailwind.config = tailwindConfig; // PhotoGallery.js const PhotoGallery = () => { const galleryItems = [ { id: 1, url: "https://images.unsplash.com/photo-1469474968028-56623f02e42e", alt: "Foggy forest with tall pine trees", title: "Mystic Forest", location: "Pacific Northwest" }, { id: 2, url: "https://images.unsplash.com/photo-1426604966848-d7adac402bff", alt: "Mountain lake with crystal clear water", title: "Alpine Lake", location: "Swiss Alps" }, { id: 3, url: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e", alt: "Sunset over mountain range", title: "Golden Hour", location: "Rocky Mountains" }, { id: 4, url: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05", alt: "Rolling hills at dawn with morning mist", title: "Morning Mist", location: "Tuscany, Italy" }, { id: 5, url: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e", alt: "Sunlight streaming through forest canopy", title: "Forest Light", location: "Redwood National Park" }, { id: 6, url: "https://images.unsplash.com/photo-1570641963303-92ce4845ed4c", alt: "Desert landscape at sunset", title: "Desert Dunes", location: "Sahara Desert" } ]; return ( <div className="w-full h-screen overflow-y-auto snap-y snap-mandatory scroll-py-4"> <div className="grid grid-rows-gallery gap-4 p-4"> {galleryItems.map((item) => ( <div key={item.id} className="snap-start w-full h-full rounded-lg overflow-hidden relative group" > <img src={item.url} alt={item.alt} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <div className="absolute bottom-0 left-0 right-0 p-6 text-white"> <h3 className="text-2xl font-bold mb-1">{item.title}</h3> <p className="text-sm text-gray-200">{item.location}</p> </div> </div> </div> ))} </div> </div> ); }; export default PhotoGallery;
Dashboard Layout
A dashboard interface with a custom grid template for header, content, and footer sections.
import tailwindConfig from "./tailwind.config.js"; tailwind.config = tailwindConfig; // DashboardLayout.js const DashboardLayout = () => { return ( <div className="h-screen grid grid-rows-dashboard"> <header className="bg-blue-600 text-white p-4 flex items-center"> <h1 className="text-xl font-bold">Dashboard</h1> </header> <main className="overflow-y-auto snap-y snap-mandatory"> <div className="grid gap-4 p-4"> {[1, 2, 3, 4].map((section) => ( <div key={section} className="snap-start bg-white rounded-lg shadow-lg p-6" > <h2 className="text-lg font-semibold mb-4">Section {section}</h2> <p className="text-gray-600">Content for section {section}</p> </div> ))} </div> </main> <footer className="bg-gray-100 p-2 flex items-center justify-center"> <span className="text-sm text-gray-600">© 2025 Dashboard</span> </footer> </div> ); }; export default DashboardLayout;
Timeline View
A vertical timeline with custom row height for different events.
import tailwindConfig from "./tailwind.config.js"; tailwind.config = tailwindConfig; const TimelineView = () => { return ( <div className="w-full h-screen overflow-y-auto snap-y snap-mandatory"> <div className="grid grid-rows-timeline gap-8 p-6 relative"> <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200" /> {[1, 2, 3, 4].map((event) => ( <div key={event} className="snap-start pl-16 relative" > <div className="absolute left-6 top-2 w-4 h-4 rounded-full bg-blue-500" /> <div className="bg-white rounded-lg shadow-lg p-6"> <h3 className="text-lg font-bold mb-2">Event Title</h3> <p className="text-gray-600">Event description and details</p> <span className="text-sm text-gray-400 mt-2 block"> {new Date().toLocaleDateString()} </span> </div> </div> ))} </div> </div> ); }; export default TimelineView;
Best Practices
Maintain Design Consistency
Consistency in design plays a crucial role in delivering a seamless user experience. When applying Tailwind's grid-rows-*
utilities, it is essential to maintain a structured approach that aligns with the rest of your project's grid layout. By defining clear row configurations, you can ensure a predictable content structure across multiple components. For example, keeping a consistent row height ratio across different sections, such as headers, content, and footers.
Tailwind’s predefined classes like grid-rows-2
, grid-rows-3
, etc., offer a consistent approach to defining row templates without introducing unpredictable gaps or spacing inconsistencies. When custom grid rows are needed, rely on defining the values in the config file rather than using arbitrary values here and there. This makes it easier to align the layout with the overall design system and apply changes consistently across different screen sizes.
Optimize for Reusability
Reusability is an important aspect of modern development, and leveraging Tailwind’s grid-rows-*
utilities effectively can enhance component scalability. Designing components with flexible grid structures ensures they can be used across different sections without requiring significant modifications.
One way to optimize reusability is by creating utility-based grid templates that can accommodate different content types. For example, defining a grid-rows-4
structure in a reusable card component allows developers to maintain consistent row heights while dynamically adjusting content inside each row.
Accessibility Considerations
Improve Content Structure and Flow
Using Tailwind’s grid-rows-*
utilities effectively ensures a structured and predictable layout, improving both usability and visual harmony. A well-defined row system prevents content from becoming disorganized or misaligned, creating a more seamless and engaging reading experience.
By specifying explicit row templates like grid-rows-3
or grid-rows-6
, developers can maintain a consistent vertical structure, ensuring that elements align correctly across different screen sizes. Additionally, incorporating spacing utilities such as gap-*
enhances content separation, reducing visual clutter and guiding users’ attention to key information.
This structured approach helps maintain clear distinctions between paragraphs, lists, and headings, promoting readability for all users, including those with cognitive impairments.
Focs on High Contrast
Maintaining adequate contrast is essential for accessibility, as it ensures that all users, including those with visual impairments, can clearly perceive content. The way rows are structured using grid-rows-*
impacts how colors and text align within a section, influencing contrast and readability.
To create well-defined visual separation, use border-*
and shadow-*
utilities alongside grid row definitions. For example, applying border-b
between rows enhances distinction, while using bg-gray-100
for alternating rows improves contrast in tabular layouts. Additionally, defining a background color with sufficient contrast against text ensures that content remains legible.