css网格动态显示两行中的项目数，防止最后一行中只有一个项目

我想把旧的flex代码转换成CSS网格；如何使用网格处理跨越两行的动态数量的网格项（介于1-10之间），特别是确保第二行永远不会有单个网格项（出于设计目的）

以前使用JS查看页面加载时生成的项目数量，并应用一个类

fourItemsError

或

fiveItemsError

，该类添加了

flex

，以确定每一行的灵活性。我想使用cssgrid使其更加动态/易于管理，如果在某个点上网格容器中有超过10个项目

JSX

---

对于CSS网格，我不确定如何翻译。到目前为止，我尝试对网格模板列和网格模板行使用

repeat

属性。当网格包含一定数量的项时，为单个项。。这里的代码笔显示了5个网格项

不确定网格是否可以单独完成这项工作。您将看到媒体查询。不确定Grid是否可以单独完成此操作。您将看到媒体查询。

<div className={STYLES.tilesWrapper}>
 <div className={STYLES.tiles}>
  {tiles.map((tile, i) => (
   <div
    key={i}
    className={classNames(numPerRowClass, STYLES.tileContainer)}>
     {tile}
    </div>
     ))}
 </div>
</div>

const numPerRowClass = numTiles >= 5 && numTiles % 2 !== 0
        ? STYLES.fivePerRow
        : STYLES.fourPerRow;

.tiles
  padding: 40px 0 0 0
  display: flex
  align-items: flex-start
  flex-direction: row
  justify-content: center
  flex-wrap: wrap
  width: 100%
  max-width: 1200px

.fivePerRow
  width: 20%
  flex: 0 0 calc(20% - 16px)

.fourPerRow
  width: 25%
  flex: 0 0 calc(25% - 50px)