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