如何使用CSS显示列表网格或flex

Question

如何使用CSS显示网格或flex，如下所示：

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

继续产品列表将重复相同的布局。

示例图片显示网格Flex

Answer 1

要实现这一点，您可以使用CSS 。有关详细信息，请参阅代码中的注释。

​

.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>

​

Answer 2

可以使用显示网格和网格模板区域生成5列和4行，如下所示：

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

不要忘记在每个类/元素/id上写入网格区域。