如何使用 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>

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

Example Picture Display Grid Flex

Answer 1

你可以使用显示网格，grid-template-areas做成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"
}

不要忘记在每个 class/element/id

上写上 grid-area

Answer 2

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

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

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

How to display list grid or flex using CSS

html

css

css-grid