有没有办法以特定数字的增量/倍数调整 css 元素的大小？

Question

我希望任何 div 元素在视口大小发生变化时调整大小，因此通常我可以使用例如 flex 或10emor %- 但实际上我希望它仅以 30 像素的增量调整大小，因此它始终与背景对齐。

这可能吗？

mod我能想到的唯一方法已经失效了——以前的操作员可能可以，但现在不行了？

在CSS计算函数中使用模数

我也可以通过媒体查询来实现这一点，但将其设置为仅 30 像素的增量将是一场噩梦。

下面的代码片段的最大宽度为 210 像素，最小宽度为 30 像素。当浏览器从宽调整为细时，它应该仅以 30 像素的增量跳跃。

.Mlt{
   background-color:grey;
   min-width:60px;
   max-width:210px;
}

<div class="Mlt">
    <p>Hello</p>
    <p>Content</p>
</div>

Answer 1

CSS 网格可以做到这一点，但您将需要一个额外的容器。技巧是创建具有30px宽度的列auto-fit，然后您只需跨越所有创建的列：

_{jquery 的使用仅用于演示目的，以显示调整大小时的宽度。我还删除了最大宽度以方便测试}

console.log($('.Mlt > div').width());
$(window).resize(function() {
  console.log($('.Mlt > div').width());
})

.Mlt {
  min-width: 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,30px);
  /* justify-content: center; <-- use this if you want to center the div */
}

.Mlt > div {
  grid-column:1/-1; /* take all the columns */
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Mlt">
  <div >
    <p>Hello</p>
    <p>Content</p>
  </div>
</div>