4 × 1<header>Brand, navigation, and primary actions.
Tailwind CSS
Tailwind Grid Guide & Visual Builder
Use this Tailwind grid builder as a visual grid maker, responsive layout editor, or grid UI builder. Arrange editable content blocks on a live canvas, set columns and gaps for each screen size, adjust every block's column and row span, and copy the generated Tailwind markup.
Drag-and-drop blocksSix responsive layoutsLive Tailwind markup
Responsive Tailwind CSS workspace
Build your grid visually
Drag cards, edit their content, and tune every breakpoint.
Preview breakpointBase is Tailwind’s unprefixed mobile / XS layout.
1 × 2<aside>Filters, links, or supporting navigation.
3 × 2<main>The primary content area for this layout.
4 × 1<footer>Secondary links and page information.
Core formularesponsive utility = breakpoint prefix + grid utility
Base utilities apply at every size; sm:, md:, lg:, xl:, and 2xl: override them from their minimum widths upward.
Method
How the tailwind grid builder works
Start with the unprefixed mobile layout, which acts as the base or XS view. Configure grid-template columns and gap, then move through Tailwind's mobile-first breakpoints. Each block combines col-span and row-span utilities at every breakpoint, while document order determines automatic grid placement.
Formula
responsive utility = breakpoint prefix + grid utilityBase utilities apply at every size; sm:, md:, lg:, xl:, and 2xl: override them from their minimum widths upward.
Worked example
Build a sidebar and main-content layout across six screen sizes
Use one column at the base size, two at sm, four at md, and progressively wider grids through 2xl. A sidebar can span the full base grid, one column at sm, and three of twelve columns at 2xl, while the main area uses the remaining tracks.
Implementation
Copyable code examples
Use these examples as a starting point, then match the values and assumptions to the rendered project.
Responsive Tailwind grid
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
<aside class="col-span-1 md:col-span-1 lg:col-span-2">Sidebar</aside>
<main class="col-span-1 md:col-span-3 lg:col-span-4">Content</main>
</div>Optional custom XS breakpoint
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
}
/* xs:grid-cols-2 now starts at 30rem */Mobile-first classes
<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 xl:grid-cols-4 xl:gap-6">
<!-- Base classes apply first; prefixed classes override upward. -->
</section>Practical guidance
Using the result accurately
Design the smallest layout first, keep source order meaningful, and add breakpoint overrides only where the content needs them. Check that column spans never exceed their active grid, avoid unnecessary row spans, and test the copied markup with real content at widths around every breakpoint.
Important limitation
The preview models Tailwind's default breakpoints and common grid utilities. A project with custom breakpoints, custom spacing, dense auto-placement, explicit start lines, subgrid, or arbitrary templates may need manual changes after copying the markup.
References: Tailwind CSS grid-template-columns documentation.
Common questions
Tailwind Grid Builder FAQ
Answers about the method, assumptions, and practical use.
Does Tailwind CSS include an XS breakpoint by default?
No. Tailwind's unprefixed utilities are the mobile or base layout below sm. The builder labels that view Base / XS. You can add a custom xs breakpoint with a --breakpoint-xs theme variable if the project needs one.
How do I reorder Tailwind grid items?
Drag blocks on the canvas or use their arrow controls. The builder changes source order, allowing normal CSS Grid auto-placement to position the items without extra order utilities.
Can every breakpoint use a different number of columns?
Yes. Base, sm, md, lg, xl, and 2xl each have independent column and gap controls. Every block also stores a separate column span and row span for each view.
Will the generated classes work with Tailwind CSS v4?
Yes. The output uses complete grid-cols, gap, col-span, row-span, and responsive variant class names that Tailwind CSS v4 can detect in source files.
Does the grid content leave my browser?
No. The builder keeps the layout and content in temporary browser state. Copying the generated markup uses the browser clipboard only when you choose the copy action.
What can I create with this custom grid maker?
Use the visual grid editor for dashboard layouts, card collections, Tailwind bento grids, landing-page sections, sidebars, content feeds, galleries, and other responsive grid interfaces.