CSS
Responsive Grid Layout without Media Queries
Learn to create a responsive CSS Grid layout that automatically adjusts column numbers and sizes using grid-template-columns, repeat(), and minmax() for flexible designs.
.responsive-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
How it works: This snippet demonstrates how to build a highly responsive grid layout using CSS Grid. The `grid-template-columns` property, combined with `repeat(auto-fit, minmax(250px, 1fr))`, automatically creates as many columns as can fit, each at least 250px wide, and allowing them to grow equally to fill the available space. The `gap` property provides consistent spacing between grid items without needing complex margin calculations.