Css 控制列数

我想用css网格实现一个可调整大小的月份选择器，但也要控制我的网格的列数，以便它总是很好地显示

我希望避免/限制/控制孤立显示的情况，如：

X X X X X
X X X X X
X X

调整网格大小时

我们希望有一个

grid column number

属性，它可以为一个网格定义一组可接受的列数（我相信这是不存在的）

另一种方法是添加元素查询，但我想挑战css网格，避免基于javascript的多边形填充，并避免侦听器出于性能目的调整事件大小

这里有一个坏小提琴，这是接近实现，但我不能让它放弃给定的5/5/2布局情况

破损（但明显相关）代码：

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
.机构{
显示：网格；
网格模板列：重复（自动填充，64px）；
网格自动行：最小最大值（64px，1fr）；
对齐内容：周围的空间；
证明内容：之间的空间；
网格间距：0；
过渡：宽度10s线性；
最小宽度：64px；
宽度：100%；
边框：1px纯红；
}
莫先生{
显示器：flex；
身高：100%；
对齐项目：居中；
证明内容：中心；
}
莫斯潘先生{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：64px；
高度：64px；
边框：1px灰色虚线；
}

---

感谢您的帮助，

如果您想使用CSS网格，您可以使用

@media

查询

网格模板列

为每个调整断点设置不同的值

---

CSS网格不像CSS FlexBox那样具有最小宽度值。像在JSFIDLE中一样使用CSS FlexBox如果您不想首先使用

@media

，请在问题中发布您的代码，而不仅仅是链接到它。第二，您希望“孤立”显示发生什么情况？感谢您提醒发布指南。关于孤儿，我真希望没有。控制列数意味着无限期地拉伸单元格，直到满足下一个“列数”规则。这有意义吗？六个小时后，在感谢我提醒您关于发布问题的指导原则之后，您仍然没有添加相关代码。请这样做。@DavidThomas添加损坏的代码不会给我的问题增加任何价值，你的评论也是如此。我理解这些指导方针，并在它们有意义时对它们作出承诺；我不认为添加损坏的代码有什么作用，因为它与调整大小的行为有关，我认为如果没有一个实例，很难考虑这种行为。最后，我想说“在发布我的问题后的2分钟内——我没有多余的问题——我被提醒遵循指导原则，而不是回答、指导或建议如何解决问题。”：这是你现在想要反映的心态吗？这是我个人一直想要遵循的心态，是的，我希望使用@media，但这意味着我知道整个屏幕的大小；我正在寻找一种基于“宽度流体”的解决方案（如原始帖子中提到的元素查询）使用CSS FlexBox？我第一次尝试使用FlexBox，但问题转移了。它应该是

justify content:space-between

和处理孤儿的组合，但我没有成功。你能帮个忙吗？

<div class="body">
  <div class="mo"><span>Jan</span></div>
  <div class="mo"><span>Feb</span></div>
  <div class="mo"><span>Mar</span></div>
  <div class="mo"><span>Apr</span></div>
  <div class="mo"><span>May</span></div>
  <div class="mo"><span>Jun</span></div>
  <div class="mo"><span>Jul</span></div>
  <div class="mo"><span>Aug</span></div>
  <div class="mo"><span>Sep</span></div>
  <div class="mo"><span>Oct</span></div>
  <div class="mo"><span>Nov</span></div>
  <div class="mo"><span>Dec</span></div>
</div>

.body {  
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  grid-auto-rows: minmax(64px, 1fr);
  align-content: space-around;
  justify-content: space-between;
  grid-gap: 0;
  transition: width 10s linear;
  min-width: 64px;
  width: 100%;
  border: 1px solid red;
}

.mo {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.mo span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px dashed gray;
}