Question

我想使用CSS网格实现可调整大小的月份选择器，但还可以控制网格的列数，使其始终显示良好。

我想避免/限制/控制像这样的孤立显示案例：

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

调整网格大小时。

希望的是拥有一个grid-column-number属性，该属性可以为网格定义一组可接受的列数（我认为这是不存在的）。

另一种方法是添加元素查询，但是我想挑战css-grid并避免使用基于JavaScript的polyfill，以及出于性能目的围绕大小调整事件的侦听器。

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

http://jsfiddle.net/wLz8kahq/

残破（但显然相关）的代码：

<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;
}

感谢您的帮助，

Answer 1

如果要使用CSS Grid，可以对每个调整大小的断点使用@media个查询，其中grid-template-columns个不同的值。

CSS Grid的行为与CSS FlexBox的最小宽度值不同。如果您不想使用@media，请像在jsfiddle中一样使用CSS FlexBox。

控制列数

1 个答案: