以前在网格上忙乱了一段时间，试图弄清楚在没有太多运气的情况下这是否可能。
我正在一个网站上，其中所有内容都安排在12px正方形的严格背景网格内，该网格也用作基本字体大小，因此1rem = 12px。为了保持垂直节奏，我需要确保所有元素（包括填充，边距和边框）最终的宽度和高度都等于该基本网格大小的几倍。
对于文本内容（如段落和标题），只要行高都设置为1rem，2rem，3rem等，这并不是超级困难。但是，对于图像，我很难看到如何将其强制为倍数的网格大小，没有一点JavaScript。
不是我不能使用javascript，但我不是真的想要。
例如，我有一个<img>，其原始大小为100px x 100px。是否可以将其限制为96px（8rem）或108px（9rem），或者将其放置在较大的容器中并对容器强制执行限制？ grid-auto-rows: 1rem似乎没有完成这项工作（因为该元素仅创建了1条隐式轨道），grid-template-rows: repeat(auto-fill, 1rem)也没有。
忙于摆弄一阵子，试图弄清楚在没有太多运气的情况下这是否可能。我正在一个网站上，其中所有内容都安排在12px的严格背景网格内...
您可以使用css @media查询在特定断点处为图像提供特定大小。