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

Question

我希望任何 div 元素在视口(viewport)大小改变时调整大小，所以通常我可以使用例如flex 或 10em 或 % - 但实际上我希望它只以 30 像素为增量调整大小，因此它始终与背景对齐。

这可能吗？

我能想到的唯一方法是失效 - 在过去使用 mod 运算符可能可行，但现在不行？

Using modulus in css calc function

我也可以通过媒体查询实现这一点，但是将其设置为仅 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 网格可以做到这一点，但您需要一个额外的容器。诀窍是使用 auto-fit 创建宽度为 30px 的列，然后您只需跨越所有创建的列:

_{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>