Javascript 如果组件数量为奇数，是否可以在左侧显示组件？

我有一个2列网格组件，如下图所示。如果组件数量为奇数，例如5，则应在左侧放置两行2个组件和一行单个组件。 但我的问题是，我的第五个分量是全宽的，而不是左边。它应该是这样的。当有奇数个组件时，如何使第5个组件保持在左侧而不是全宽

如果我删除

flex:1 auto从我的CSS中，它可以工作，但问题是，当我缩小窗口大小时，没有描述的组件（例如第二个组件）将不会达到全宽。图片如下：

注意：我无法修改HTML。我只能更改CSS

这是我的CSS和HTML：

CSS:

.myWrapper
{
显示器：flex；
柔性包装：包装；
宽度：102.5%；
浮动：左；
利润率：-10px；
}
.myContentBox
{
flex:1自动；
}

.
尝试使用网格而不是flex

看看这个工作示例。

HTML

请参阅此链接以了解有关网格的更多信息

尝试使用网格而不是flex

看看这个工作示例。

HTML

请参阅此链接以了解有关网格的更多信息

这是否满足您的要求


.myWrapper
{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.myContentBox
{
宽度：49%；
背景：红色；
边框：1px纯蓝色；
}

1.
2.
3.
4.
5.
这是否满足您的要求


.myWrapper
{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.myContentBox
{
宽度：49%；
背景：红色；
边框：1px纯蓝色；
}

1.
2.
3.
4.
5.
我无法更改HTML。只有CSS我可以更改。无需更改html。在我的代码中将myWrapper视为网格容器，将myContentBox视为网格项Using grid不起作用。你的html中的col-sm-6 col-md-6在哪里？你能分享你的代码吗？像小提琴一样在操场上工作？我把它放在问题的最上面。但是我的问题是为什么你的html中没有col-sm-6 col-md-6？我不能更改html。只有CSS我可以更改。无需更改html。在我的代码中将myWrapper视为网格容器，将myContentBox视为网格项Using grid不起作用。你的html中的col-sm-6 col-md-6在哪里？你能分享你的代码吗？像小提琴一样在操场上工作？我把它放在问题的最上面。但是我的问题是，为什么你的html中没有col-sm-6 col-md-6？删除
flex:1 auto就是说，当您缩小窗口大小时，没有描述的组件将不会变为全宽。这里的示例：。正如您所看到的，顶部组件不会像底部组件那样达到完整的窗口大小就是说，当您缩小窗口大小时，没有描述的组件将不会变为全宽。这里的示例：。正如您所看到的，顶部组件不会像底部组件那样达到完整的窗口大小。
.myWrapper
 {
    display: flex;
    flex-wrap: wrap;
    width: 102.5%;
    float: left;
    margin: -10px;
 }
.myContentBox 
{
   flex: 1 1 auto;
}

<div class="myWrapper">
<div class="myContentBox col-sm-6 col-md-6"></div>  
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
<div class="myContentBox col-sm-6 col-md-6"></div>
</div>

  <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}