Two Column Grid Layout

A two column grid layout built with pure HTML and CSS that places content in a balanced side-by-side structure, making it easy to compare or pair related information without relying on JavaScript or external libraries.

Usage

This component is ideal for layouts where content benefits from parallel presentation, such as text alongside images, feature descriptions next to visuals, forms paired with explanations, or comparison style sections on landing pages.

Implementation

The layout is implemented using CSS grid or flexbox with responsive breakpoints, allowing the two columns to sit side by side on larger screens and stack vertically on smaller devices for optimal readability.

HTML

<div class="ss-grid two-col">
  <div class="box content-box">
    <h4>Content</h4>
    <p>Short text preview for layout demo.</p>
  </div>

  <div class="box image-box">
    <img 
      src="#"
      alt="Preview image">
  </div>
</div>

<div class="ss-grid two-col">
  <div class="box content-box">
    <h4>Content</h4>
    <p>Short text preview for layout demo.</p>
  </div>

  <div class="box image-box">
    <img 
      src="#"
      alt="Preview image">
  </div>
</div>

CSS

.ss-grid.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:900px;
  margin:auto;
  padding:20px;
}

.ss-grid.two-col .box{
  border-radius:18px;
  padding:24px;
  background:var(--box-bg);
  color:var(--box-text);
  border:1px solid var(--box-border);
}

.content-box h3{
  font-size:20px;
  margin-bottom:8px;
}

.content-box p{
  font-size:14px;
  line-height:1.6;
  color:var(--box-muted);
}

.image-box{
  min-height:220px;
  padding:0;
  background-image:url("#");
  background-size:cover;
  background-position:center;
}

:root{
  --box-bg:#ffffff;
  --box-text:#0f172a;
  --box-muted:#64748b;
  --box-border:#e5e7eb;
}

@media (prefers-color-scheme: dark){
  :root{
    --box-bg:#020617;
    --box-text:#e5e7eb;
    --box-muted:#94a3b8;
    --box-border:#1f2937;
  }
}

@media (max-width:700px){
  .ss-grid.two-col{
    grid-template-columns:1fr;
  }

  .image-box{
    min-height:180px;
  }
}

.ss-grid.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:900px;
  margin:auto;
  padding:20px;
}

.ss-grid.two-col .box{
  border-radius:18px;
  padding:24px;
  background:var(--box-bg);
  color:var(--box-text);
  border:1px solid var(--box-border);
}

.content-box h3{
  font-size:20px;
  margin-bottom:8px;
}

.content-box p{
  font-size:14px;
  line-height:1.6;
  color:var(--box-muted);
}

.image-box{
  min-height:220px;
  padding:0;
  background-image:url("#");
  background-size:cover;
  background-position:center;
}

:root{
  --box-bg:#ffffff;
  --box-text:#0f172a;
  --box-muted:#64748b;
  --box-border:#e5e7eb;
}

@media (prefers-color-scheme: dark){
  :root{
    --box-bg:#020617;
    --box-text:#e5e7eb;
    --box-muted:#94a3b8;
    --box-border:#1f2937;
  }
}

@media (max-width:700px){
  .ss-grid.two-col{
    grid-template-columns:1fr;
  }

  .image-box{
    min-height:180px;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Provides clear side-by-side content structure
• Stacks cleanly on smaller screens
• Easy to customize column width ratios
• Designed for balanced content pairing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.