Content Grid

.content-grid SCSS Layout

What it does

The .content-grid, .full-width, and .full-width-grid classes create a responsive, flexible layout using CSS Grid. This system allows you to:

• Center your main content with a maximum width
• Add breakout sections that extend beyond the main content
• Add full-width sections that span the entire viewport
• Control horizontal padding responsively, with support for fluid or breakpoint-based spacing

Key Features

• Responsive grid: Adapts to different screen sizes
• Customizable padding: Uses CSS variables for --padding-inline that can be set fluidly or at breakpoints
• Breakout and full-width support: Easily create sections that break out of the main content width or span the full viewport
• Semantic grid areas: Named grid columns for content, breakout, and full-width

How to use

1. Basic usage

<div class="content-grid">
  <div>Main content</div>
</div>

2. With breakout and full-width sections

<div class="content-grid">
  <div>Main content</div>
  <div class="breakout-grid">Breakout section</div>
  <div class="full-width-grid">
    <figure>
      <img src="..." alt="Full width image">
    </figure>
  </div>
</div>

3. Customizing padding

You can override the horizontal padding by setting the --padding-inline variable:

<div class="content-grid" style="--padding-inline: 2rem;">
  ...
</div>

How it works

• The grid uses named columns: content, breakout, and full-width.
• By default, direct children are placed in the content column.
• Add .breakout-grid or .full-width-grid to a child to make it span the respective columns.
• Padding and max-widths are controlled by CSS variables and can be adjusted at breakpoints or fluidly with clamp()/calc() if desired.

Example

<div class="content-grid">
  <div>Regular content</div>
  <div class="breakout-grid">Breakout content</div>
  <div class="full-width-grid">
    <figure>
      <img src="banner.jpg" alt="Banner">
    </figure>
  </div>
</div>

Result:

• The main content is centered and constrained in width.
• The breakout section extends beyond the main content but not the full viewport.
• The full-width section (e.g., an image) spans the entire viewport width.

HTML Code (Demo)

<div class="content-grid">
  <div class="ds-showcase--container">
    <p>Some content</p>
  </div>
  <div class="breakout-grid ds-showcase--container">
    <p>Some <b>breakout-grid</b> content</p>
  </div>
  <div class="ds-showcase--container">
    <p>Some content</p><div class="ds-showcase--conta"></div>
  </div>
  <div class="full-width-grid ds-showcase--container">
    <div class="ds-showcase--container">
      <p>Some <b>full-width-grid</b> content</p>
    </div>
  </div>
  <div class="ds-showcase--container">
    <p>Some content</p>
  </div>
  <div class="full-width ds-showcase--container">
    <p>Some <b>full-width</b> content</p>
  </div>
  <div class="ds-showcase--container">
    <p>Some content</p>
  </div>
</div>

Configuration

{
  "headline": "Content Grid"
}