Grid

Overview

The dd-grid component provides a responsive 24-column grid system based on flexbox, enabling flexible layouts for rows and columns with utilities for alignment, spacing, and responsive breakpoints. It's the foundational layout tool for arranging content blocks, supporting full-width, contained, and nested grids.

This component is essential for all pages, used in sections, cards, tabs, and more. In WordPress, integrate it via ACF layouts or groups to define grid structures dynamically. In Drupal, use it within Paragraph templates for entity rendering, with classes applied via field formatters or preprocess functions.

Basic Usage

Wrap grid items in a div with class dd-g for the row. Use column classes like dd-u-*-24 for widths, with breakpoints (xs, sm, md, lg, xl, etc.). Add l-box for item padding.

For responsive: dd-u-md-12-24 for 50% on medium and up, full-width below.

CSS Modifiers (from _grid.scss)

The SCSS file defines the grid with flexbox, no-gutters option, and responsive utilities up to x4k breakpoints. Key modifiers include:

• -x-center, -y-center: Justify/align content (from modifiers.scss).
• Breakpoint-specific: xs (default), sm, md, lg, xl, xxl, xxxl, x4k for media queries.

For ACF/Paragraphs integration, apply grid classes dynamically based on field choices.

Accessibility and Best Practices

Use semantic elements inside grids (e.g., role="row" for data grids). Ensure logical tab order. For tables, prefer semantic <table> over grids. Test responsive reflow for readability. In CMS, provide field options for column spans and validate for mobile-first designs.

Example A: Two columns with gutters that are both 50% in width.

Preview

Code

<div class="dd-g">
  <div class="dd-u-12-24"><div class="l-box">Left</div></div>
  <div class="dd-u-12-24"><div class="l-box">Right</div></div>
</div>

Example B: Three columns that are both 33.333% in width.

Preview

Code

<div class="dd-g">
  <div class="dd-u-8-24">Left</div>
  <div class="dd-u-8-24">Center</div>
  <div class="dd-u-8-24">Right</div>
</div>

Responsive Units - 4 columns on large and up screens

Preview

Code

<div class="dd-g">
  <div class="dd-u-1-1 dd-u-lg-6-24"><div class="l-box">left</div></div>
  <div class="dd-u-1-1 dd-u-lg-6-24"><div class="l-box">left-center</div></div>
  <div class="dd-u-1-1 dd-u-lg-6-24"><div class="l-box">right-center</div></div>
  <div class="dd-u-1-1 dd-u-lg-6-24"><div class="l-box">right</div></div>
</div>

Preview: every column width