Html 如何设置行中的项目

我有阵列卡，卡可以采取或25%的屏幕宽度，或50%。 它的对象是这样的：{name:1，size:25%}。 通过js过滤阵列后，我得到一个新的卡片阵列，我需要在网格中以100%宽的行布局卡片。所以可能需要2550，5050，2550…等等。因此，我认为它可以与网格自动流属性。但是我还不太擅长网格

.cards {
  display: grid;
  width: 100%;
  grid-auto-flow: row dense;
}
.card {
  border: 1px solid #d1d1d1;
  width: 25%;
}
.card-wide {
  width: 50%;
}

---

您可以使用

网格模板列：重复（4，1fr）

进行4列布局，

卡片范围内的
元素可以使用
网格列：span 2
占据两列-请参见下面的演示：


.cards{
显示：网格；
宽度：100%；
网格模板列：重复（4，1fr）；
网格自动行：100px；/*为图示设置行高*/
网格自动流动：行密集；/*此处不强制*/
}
.卡片{
边框：1px实心#d1d1；
}
.全卡{
格线柱：跨度2；/*占用两个柱*/
}

<代码> > p>您可以考虑该单元的代码> 1FR< /代码>，然后判断元素是否跨越一列或两列：


.cards{
显示：网格；
网格模板列：重复（4,1fr）；
网格自动流动：稠密；
}
/*默认情况下将采用一列*/
.卡片{
背景：红色；
}
.全卡{
格线柱：跨度2；/*两根柱*/
背景：绿色；
}
.cards>div{
最小高度：50px；
边框：1px实心；
}

大家好，欢迎来到SO。请参阅并提供一个。到目前为止你有什么？期望的输出是什么？tnx，不知道span 2=）tnx，不知道span 2=）