An asymmetric content grid built with pure HTML and CSS that intentionally avoids equal sized columns and rows, creating a dynamic layout where content blocks vary in size and placement while remaining visually balanced without relying on JavaScript.
Usage
This component is ideal for layouts where creative expression matters, such as editorial pages, portfolios, marketing showcases, product storytelling sections, or content driven designs that benefit from breaking strict grid symmetry.
Implementation
The asymmetry is achieved using CSS grid with mixed column widths, row spans, and controlled alignment offsets, allowing content blocks to differ in scale while maintaining responsive structure and readability.
HTML
<div class="grid-asymmetric">
<div class="grid-asymmetric__main">
Main
</div>
<div class="grid-asymmetric__side">
Side
</div>
</div>CSS
.grid-asymmetric {
width: 200px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.5rem;
}
.grid-asymmetric__main,
.grid-asymmetric__side {
padding: 0.75rem;
border-radius: 12px;
background: #ffffff;
color: #111827;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
font-size: 12px;
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
.grid-asymmetric__main,
.grid-asymmetric__side {
background: #1f2937;
color: #e5e7eb;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Breaks rigid symmetry for visual energy
- Maintains balance despite irregular sizing
- Adapts smoothly across screen sizes
- Designed for creative and editorial layouts
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.