A responsive auto fit grid built with pure HTML and CSS that automatically adjusts the number of columns based on available space, ensuring content fits naturally across different screen sizes without breakpoints or JavaScript.
Usage
This component is ideal for layouts where content quantity is dynamic, such as UI component libraries, feature grids, card collections, galleries, or dashboards where items should reflow gracefully as the viewport changes.
Implementation
The grid is implemented using CSS Grid with auto fit and minmax(), allowing columns to expand or collapse automatically while maintaining consistent item sizing and spacing across all screen widths.
HTML
<div class="ss-grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>CSS
.ss-grid > *{
background:#ffffff;
border-radius:14px;
padding:16px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:transform .2s ease, box-shadow .2s ease;
}
.ss-grid > *:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,.12);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Automatically adjusts column count
- Eliminates the need for media queries
- Maintains consistent item sizing
- Designed for flexible, future proof 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.