The problem
You need a grid layout that automatically adjusts the number of columns based on screen size without media queries.
The solution
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
padding: 20px;
}
/* Alternative with auto-fill for empty tracks */
.auto-grid-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}See it live
Parameters
auto-fitkeywordStretches items to fill available space
auto-fillkeywordCreates empty tracks if space allows
minmax()functionSets minimum and maximum column width
Put it to work
<div class="auto-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</div>Worth knowing
auto-fit collapses empty tracks while auto-fill keeps them. Use auto-fit for most cases.