Document
Document 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /*Pour faire joli*/
      .bloc {
        min-height: 25vh;
        background: blue;
      }

      /*Pour que cela fonctionne*/
      .full-width {
        margin-bottom: 1rem;
      }
      .my-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 1rem;
        max-width: 1200px;
        margin: 0 auto;
      }

      .my-grid .container {
        grid-column: 1/13;
      }
      .my-grid .container-small {
        grid-column: 3/11;
      }

      .list-product {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
      }
      .product {
        background: red;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="bloc full-width"></div>

      <div class="my-grid">
        <div class="bloc container container-medium"></div>
        <div class="bloc container container-small">
          <div class="list-product">
            <div class="product"><h2>Produit 1</h2></div>
            <div class="product"><h2>Produit 2</h2></div>
            <div class="product"><h2>Produit 3</h2></div>
            <div class="product"><h2>Produit 4</h2></div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>