How to display list grid or flex using CSS-CodePudding

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

<ul >
<li >Product 1</li>
<li >Product 2</li>
<li >Product 3</li>
<li >Product 4</li>
<li >Product 5</li>
<li >Product 6</li>
<li >Product 8</li>
<li >Product 9</li>
<li >Product 10</li>
<li >Product 11</li>
<li >Product 12</li>
<li >Product 13</li>
<li >Product 14</li>
</ul>

the continue product list will be repeat the same layout

Example Picture Display Grid Flex

CodePudding user response：

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 >
  <li >Product 1</li>
  <li >Product 2</li>
  <li >Product 3</li>
  <li >Product 4</li>
  <li >Product 5</li>
  <li >Product 6</li>
  <li >Product 7</li>
  <li >Product 8</li>
  <li >Product 9</li>
  <li >Product 10</li>
  <li >Product 11</li>
  <li >Product 12</li>
  <li >Product 13</li>
  <li >Product 14</li>
</ul>

CodePudding user response：

You can use display grid, and grid-template-areas to make 5 column and 4 row, like this:

.container{
    grid-template-areas:
    "1 1 2 3 4"
    "1 1 5 6 7"
    "8 9 10 11 11"
    "12 13 14 11 11"
}

Don't forget to write grid-area on every class/element/id

CodePudding user response：

You can use flex directly on the parent which is column 4 and accordingly you can set another properties.

.columns-4 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }