CSS
Fixed Column Grid with Flexible Item Sizing using `minmax()`
Create a CSS Grid layout with a fixed number of columns (e.g., 3, 4, 5) where each item maintains a minimum width but also grows proportionally to fill available space using `minmax()` and `repeat()`.
.fixed-column-flex-grid {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr)); /* 4 columns, each min 150px, max 1fr */
gap: 20px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
border: 1px solid #ccc;
}
.grid-card-item {
background-color: #e0f2f7;
border: 1px solid #b3e5fc;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 120px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.grid-card-item h3 {
margin-top: 0;
color: #0288d1;
}
.grid-card-item p {
font-size: 0.9em;
color: #444;
}
@media (max-width: 992px) {
.fixed-column-flex-grid {
grid-template-columns: repeat(3, minmax(140px, 1fr)); /* 3 columns on medium screens */
}
}
@media (max-width: 768px) {
.fixed-column-flex-grid {
grid-template-columns: repeat(2, minmax(130px, 1fr)); /* 2 columns on tablet */
}
}
@media (max-width: 480px) {
.fixed-column-flex-grid {
grid-template-columns: 1fr; /* 1 column on mobile */
}
}
/* HTML Structure */
<!--
<div class="fixed-column-flex-grid">
<div class="grid-card-item"><h3>Card 1</h3><p>Description for item one.</p></div>
<div class="grid-card-item"><h3>Card 2</h3><p>Description for item two.</p></div>
<div class="grid-card-item"><h3>Card 3</h3><p>Description for item three.</p></div>
<div class="grid-card-item"><h3>Card 4</h3><p>Description for item four.</p></div>
<div class="grid-card-item"><h3>Card 5</h3><p>Description for item five.</p></div>
<div class="grid-card-item"><h3>Card 6</h3><p>Description for item six.</p></div>
</div>
-->
How it works: This snippet demonstrates how to create a responsive CSS Grid with a fixed number of columns but flexible item sizing using a combination of `repeat()` and `minmax()`. `grid-template-columns: repeat(4, minmax(150px, 1fr))` creates exactly four columns. Each column will be at least `150px` wide (`minmax(150px, ...)`), but it can grow to take up an equal fraction of the available space (`1fr`) if there's more room. This ensures items never become smaller than a readable size while efficiently utilizing horizontal space. Media queries further enhance responsiveness by reducing the number of columns on smaller screens, adapting the layout gracefully for various devices without needing `auto-fit` or `auto-fill`.