Grid in Tailwind CSS
From the Tailwind CSS cheat sheet · Flexbox & Grid · verified Jul 2026
Grid
CSS Grid layout for complex two-dimensional layouts.
html
<!-- Basic grid -->
<div class="grid grid-cols-3 gap-4">
<div>1</div> <div>2</div> <div>3</div>
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card</div>
</div>💡 grid-cols-[repeat(auto-fit,minmax(250px,1fr))] is a responsive grid without breakpoints
⚡ col-span-full makes an item stretch across all columns — great for full-width sections
📌 place-items-center centers both horizontally and vertically in one class
🟢 Use grid-cols-[custom] with arbitrary values for non-standard column widths
gridlayoutcolumns
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.