<main>
<article>Item 1</article>
<article>Item 2</article>
<article>Item 3</article>
<article>Item 4</article>
<article>Item 5</article>
<article>Item 6</article>
<article>Item 7</article>
</main>
body {
padding: 2rem;
}
main {
display: grid;
/*
* auto-fit - create columns only if there's content for them
* auto-fill - create columns even if they will be empty
*/
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 5rem;
grid-gap: 1rem;
}
article {
padding: 1rem;
border: 1px solid rebeccapurple;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.