动态 css 网格，具有用于赔率/偶数行的自定义样式

Question

我正在努力熟悉 CSS 网格系统。但是，现在我正在努力弄清楚如何构建一个动态网格，该网格将为赔率/偶数行提供自定义样式。

所以基本上我想为 nx2 网格实现这种模式：

[     lg-item     ] [ sm-item ]
[ sm-item ] [     lg-item     ]
[     lg-item     ] [ sm-item ]
.
.
.

行将始终以大项目或小项目开始

对我来说 100% 的成功也将是当视口有足够的宽度大小来容纳同一行中的另一个元素时，这个网格可以自动调整大小。例子：

Small screen:
[     lg-item     ] [ sm-item ]
[ sm-item ]   [     lg-item     ]
[     lg-item     ] [ sm-item ]
.
.
.
Med screen:
[     lg-item     ] [ sm-item ]  [     lg-item     ]
[ sm-item ]  [     lg-item     ]  [ sm-item ]
[     lg-item     ] [ sm-item ]  [     lg-item     ]
.
.
.
Lg screen:
[     lg-item     ] [ sm-item ]  [     lg-item     ]   [ sm-item ]
[ sm-item ]  [     lg-item     ]  [ sm-item ]  [     lg-item     ]
[     lg-item     ] [ sm-item ]  [     lg-item     ]   [ sm-item ]
.
.
.

问题是它以哪个项目结束并不重要。行将始终以小项目或大项目开头，并在行之间交替

我对这个很陌生，所以现在我只有这个：

    <div class="search-by__inner-container">
        <div class="search-by__item">
            Flavour
        </div>
        <div class="search-by__item">
            Size
        </div>
        <div class="search-by__item">
            New
        </div>
        <div class="search-by__item">
            bundle
        </div>
    </div>

社会保障：

    .search-by__inner-container{
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 50% 50%;
        gap: .8rem;

    }
    .search-by__item{
        background: red;
        padding: 1.5rem;
    }

这只会给我这样的东西：

我不知道是否有办法反转我的行（如 Flex prop），或者我是否应该想出另一种方法来解决这个问题。最重要的是，我的愿望是动态添加这些项目，它们将自动适应这个网格系统。

有人可以给我一些提示以解决这个问题吗？

Answer 1

更新为除交替大小外对行进行条带化。

您可以使用nth-child实现交替行和大小，并通过媒体查询适应不同的屏幕尺寸：

.container {
  list-style: none;
  text-align: center;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.container > * {
  border: 1px dashed gray;
  padding: 8px;
  color: skyblue;
}

/* alternate large/small item order per row */
.container > *:nth-child(4n + 1),
.container > *:nth-child(4n + 4) {
  background: aliceblue;
  grid-column: auto / span 2;
}

/* alternate background color per row */
.container > *:nth-child(4n + 1),
.container > *:nth-child(4n + 2){
  background: cornflowerblue;
}

<ul class="container">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>  
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>  
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>  
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>  
</ul>

grid-column: auto / span 2;

该网格列属性指定每个选择器匹配项应在其天然列位置（“自动”）开始，它应该占据2列，而不是一个（“跨度2”）。