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 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
>Solution :
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 */
list-style: none;
column-gap: 1rem; /* add gaps between cells (column) */
row-gap: 1rem; /* add gaps between cells (rows) */
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>