<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>