How to display list grid or flex using CSS

Question

How to display grid or flex using CSS like example below:

<ul class="product columns-4">
  <li class="product type-product">Product 1</li>
  <li class="product type-product">Product 2</li>
  <li class="product type-product">Product 3</li>
  <li class="product type-product">Product 4</li>
  <li class="product type-product">Product 5</li>
  <li class="product type-product">Product 6</li>
  <li class="product type-product">Product 7</li>
  <li class="product type-product">Product 8</li>
  <li class="product type-product">Product 9</li>
  <li class="product type-product">Product 10</li>
  <li class="product type-product">Product 11</li>
  <li class="product type-product">Product 12</li>
  <li class="product type-product">Product 13</li>
  <li class="product type-product">Product 14</li>
</ul>

the continue product list will be repeat the same layout

Example Picture Display Grid Flex

Answer 1

To implement this, you can use CSS grid. For more details, see comments in code.

.product.columns-4 {
  display: grid; /* make grid container */
  grid-template-columns: repeat(5, 1fr); /* create template with 5 columns per row */
  column-gap: 1rem; /* add gaps between cells (column) */
  row-gap: 1rem; /* add gaps between cells (rows) */
  list-style: none;
  padding: 0;
}

/* show cells' area */
.product.type-product {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 0.2rem solid tomato;
  min-height: 100px;
  aspect-ratio: 1 / 1; /* make cell square */
}

/* encrease cells we want (#1, #11) */
.product.type-product:nth-child(10n + 1) {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<ul class="product columns-4">
  <li class="product type-product">Product 1</li>
  <li class="product type-product">Product 2</li>
  <li class="product type-product">Product 3</li>
  <li class="product type-product">Product 4</li>
  <li class="product type-product">Product 5</li>
  <li class="product type-product">Product 6</li>
  <li class="product type-product">Product 7</li>
  <li class="product type-product">Product 8</li>
  <li class="product type-product">Product 9</li>
  <li class="product type-product">Product 10</li>
  <li class="product type-product">Product 11</li>
  <li class="product type-product">Product 12</li>
  <li class="product type-product">Product 13</li>
  <li class="product type-product">Product 14</li>
</ul>