Download

Grid Container Block

Written by

in

Grid Container Block

The Grid block provides a powerful responsive CSS Grid layout system for creating multi-column designs that automatically adapt to different screen sizes.

What is the Grid Block?

The Grid block creates a CSS Grid container that:

  • Arranges child blocks in responsive column layouts
  • Supports 1-12 columns with different settings for desktop, tablet, and mobile
  • Provides automatic equal-height columns
  • Handles gap spacing between grid items
  • Perfect for feature grids, product listings, team members, and card layouts

Key Features

  • Responsive Columns: Different column counts for desktop (default), tablet, and mobile
  • 1-12 Column Support: From single column to complex 12-column grids
  • Auto Layout: Grid automatically places items in columns
  • Equal Heights: Grid items are automatically equal height
  • Gap Control: Horizontal and vertical spacing between items
  • Alignment Options: Align items within grid cells
  • Any Content: Grid cells can contain any WordPress blocks

How to Use

Basic Usage

  1. Insert Grid block
  2. Set number of columns in sidebar
  3. Click inside grid areas to add content
  4. Grid automatically wraps to next row when columns are full

Grid Settings

Layout Panel:

  • Columns (Desktop): 1-12 columns (default: 3)
  • Columns (Tablet): Responsive columns for tablets (default: 2)
  • Columns (Mobile): Columns for mobile devices (default: 1)

Spacing Panel:

  • Column Gap: Horizontal space between columns (default: 24px)
  • Row Gap: Vertical space between rows (default: 24px)
  • Padding: Inner spacing of grid container
  • Margin: Outer spacing of grid

Alignment:

  • Align Items: Vertical alignment within cells (start, center, end, stretch)
  • Justify Items: Horizontal alignment within cells

Common Use Cases

3-Column Feature Grid

Most common layout for features, services, or benefits:

  1. Insert Grid block
  2. Set columns to 3 (desktop), 2 (tablet), 1 (mobile)
  3. In each cell, add:
    • Icon block
    • Heading
    • Paragraph
  4. Set column gap to 32px for breathing room

Product/Portfolio Grid

4-column grid for products or portfolio items:

  1. Insert Grid block
  2. Set columns to 4 (desktop), 3 (tablet), 2 (mobile)
  3. In each cell:
    • Image block
    • Heading (product name)
    • Paragraph (description)
    • Button (CTA)

Team Member Grid

3 or 4 columns for team members:

  1. Insert Grid block
  2. Set columns to 3 or 4
  3. In each cell:
    • Image block (team photo)
    • Heading (name)
    • Paragraph (title/bio)
    • Social icons (optional)

Blog Post Grid

2 or 3 column grid for blog posts:

  1. Insert Grid block
  2. Set columns to 2 or 3
  3. In each cell:
    • Featured image
    • Category pill
    • Heading (post title)
    • Excerpt
    • Read more button

Best Practices

  • Mobile-First Thinking: Always set mobile columns (usually 1)
  • Use 3 or 4 Columns Maximum: More than 4 gets crowded on desktop
  • Consistent Gap Spacing: 24px or 32px works well for most designs
  • Equal Content Length: Keep content similar length across grid items
  • Test Responsively: Preview on all device sizes
  • Use Within Sections: Wrap Grid in Section block for full-width backgrounds

Responsive Breakpoints

Grid uses these breakpoints:

  • Desktop: 1024px and above (your desktop column setting)
  • Tablet: 768px – 1023px (your tablet column setting)
  • Mobile: Below 768px (your mobile column setting)

Recommended Column Combinations

  • Features: 3 (desktop) / 2 (tablet) / 1 (mobile)
  • Products: 4 (desktop) / 2 (tablet) / 1 (mobile)
  • Team: 3 (desktop) / 2 (tablet) / 1 (mobile)
  • Blog Posts: 3 (desktop) / 2 (tablet) / 1 (mobile)
  • Testimonials: 2 (desktop) / 1 (tablet) / 1 (mobile)

Tips & Tricks

  • Card Design: Add border and padding to grid items for card effect
  • Image Aspect Ratio: Use same aspect ratio images for consistency
  • Hover Effects: Apply animations to grid items for interactivity
  • Consistent Heights: Grid auto-creates equal height columns
  • Nested Grids: You can nest grids inside grid cells (use sparingly)

Advanced Techniques

Asymmetric Grid

Use Grid Span extension to make featured items span multiple columns

Masonry-Style Layout

Different height items create visual interest (set align items to start)

Mixed Content Grid

Alternate content types (image, text, video) for variety

Grid vs Row vs Section

Use Grid When:

  • You need equal-width columns that wrap
  • You want automatic equal heights
  • You need different column counts per device
  • You have 3+ items to display

Use Row When:

  • You need flexible widths (not equal)
  • You want manual width control per item
  • You have 2-3 items max
  • Content doesn’t need to wrap

Use Section When:

  • You need vertical stacking only
  • You want full-width backgrounds
  • You’re creating page sections

Accessibility

  • Grid maintains source order for screen readers
  • Ensure sufficient color contrast in grid items
  • Add alt text to all images
  • Use semantic heading hierarchy
  • Test keyboard navigation

Performance Tips

  • Optimize images before uploading
  • Use lazy loading for images below fold
  • Limit number of grid items per page (20-30 max)
  • Consider pagination for large grids

Troubleshooting

Items not aligning

  • Check that all items have similar content structure
  • Remove extra margins/padding on inner blocks
  • Set align items to stretch for equal heights

Responsive layout not working

  • Ensure you’ve set tablet and mobile column values
  • Clear cache and test on actual device
  • Check browser console for errors

Gap spacing inconsistent

  • Use grid gap settings, not margins on items
  • Remove default margins from inner blocks
  • Check for conflicting theme styles

Related Blocks

  • Section Block: Wrap Grid in Section for backgrounds
  • Row Block: Alternative for flexible layouts
  • Icon Block: Perfect for feature grid icons
  • Image Block: For portfolio/product grids

Grid block makes complex responsive layouts simple. Perfect for modern, card-based designs!

More posts