<style>
body { font-family: Arial, sans-serif; font-size: 20px; padding: 0 20px;
}
main { text-align: center; margin: 0 auto; max-width: 800px;
}
p { text-align: left; padding: 0 20px;
}
.container { display: grid; gap: .5em; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.item { width: 100px; min-height: 100px; background: lightblue; border: solid 1px; border-radius: 6px;
}
</style>
<main> <h2>Responsive Grid with No Media Queries</h2> <p>Resize the window to allow the grid items to break onto new lines. Notice the grid is fully responsive, with no need for any media queries.</p> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
</main>