Grid Columns

CSS Grid layout for responsive column structures

Overview

The Grid Columns element uses CSS Grid to create responsive multi-column layouts. It renders as a <div> with grid grid-cols-1 md:grid-cols-2 gap-6 classes by default, providing a flexible grid system that adapts to different screen sizes.

When you add a Grid Columns element, it automatically creates 2 Column child elements. You can add more columns or delete existing ones to customize the layout.

Key Features

  • CSS Grid powered: Uses native CSS Grid for precise column control and alignment
  • Responsive by default: Single column on mobile (grid-cols-1), two columns on tablet and up (md:grid-cols-2)
  • Auto-creates columns: Automatically adds 2 Column children when inserted
  • 1-12 columns: Support for any number of columns from 1 to 12 at each breakpoint
  • Consistent gaps: Uses gap-6 (1.5rem) for uniform spacing between columns
Grid vs Flex

Use Grid Columns when you need equal-width columns that form a structured grid. Use Flex Columns when you need flexible widths or more control over individual column sizing.

Settings

Configure the Grid Columns element using these settings in the Inspector panel:

Setting Description Default
Columns (Mobile) Number of columns on mobile screens (base breakpoint). Uses grid-cols-1 through grid-cols-12. 1
Columns (Tablet) Number of columns at the md: breakpoint (768px and above). Uses md:grid-cols-*. 2
Columns (Desktop) Number of columns at the lg: breakpoint (1024px and above). Uses lg:grid-cols-*. 2
Gap Space between grid items using Tailwind's gap scale (gap-0 through gap-16). gap-6 (1.5rem)
Align Items Vertical alignment of items within the grid. Options: start, center, end, stretch, baseline. stretch

Examples

2-Column Grid (Default)

The default configuration with single column on mobile, two columns on larger screens:

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div class="p-4 bg-gray-100">Column 1</div>
  <div class="p-4 bg-gray-100">Column 2</div>
</div>

3-Column Responsive Grid

A responsive grid that shows 1 column on mobile, 2 on tablet, and 3 on desktop:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 bg-gray-100">Column 1</div>
  <div class="p-4 bg-gray-100">Column 2</div>
  <div class="p-4 bg-gray-100">Column 3</div>
</div>

4-Column Grid for Cards

A 4-column grid layout commonly used for card displays:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-white rounded-lg shadow p-6">Card 1</div>
  <div class="bg-white rounded-lg shadow p-6">Card 2</div>
  <div class="bg-white rounded-lg shadow p-6">Card 3</div>
  <div class="bg-white rounded-lg shadow p-6">Card 4</div>
</div>

Grid with Unequal Column Spans

Use col-span-* classes on child columns to create asymmetric layouts:

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="md:col-span-2 p-4 bg-blue-100">Wide Column (2/3)</div>
  <div class="p-4 bg-gray-100">Narrow Column (1/3)</div>
</div>

Grid with Centered Items

Align items to the center vertically within the grid:

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
  <img src="image.jpg" alt="Image" class="rounded-lg">
  <div>
    <h3 class="text-2xl font-bold">Title</h3>
    <p>Content that is vertically centered with the image.</p>
  </div>
</div>

Column Count Reference

Available column counts from 1 to 12:

Class Columns Common Use
grid-cols-1 1 Mobile default, single column layout
grid-cols-2 2 Side-by-side content, image + text
grid-cols-3 3 Feature cards, testimonials
grid-cols-4 4 Product grids, team members
grid-cols-6 6 Logo grids, small icons
grid-cols-12 12 Fine-grained layouts with col-span

Best Practices

  • Mobile-first: Start with grid-cols-1 and add responsive variants for larger screens
  • Match content to columns: Choose column counts that fit your content naturally (3 for features, 4 for cards)
  • Consistent gaps: Use the same gap value throughout your page for visual harmony
  • Consider content height: Use items-start when columns have varying content heights to avoid stretched items
  • Flex Columns – Flexbox layout for flexible column widths
  • Container – Center content with responsive max-width
  • Div – Flexible container for custom layouts