仅使用CSS实现容器宽度适配内容且始终为8px整数倍的方案问询

可以纯CSS实现该需求，无需JavaScript。

你之前的思路无法落地的原因是：CSS没有提供读取元素实时渲染宽度的原生能力，calc()仅支持对固定单位、CSS变量、百分比等预设值做计算，无法动态获取布局完成后的元素宽度参与运算。

下面提供两种可落地的实现方案：

方案1：CSS round() 函数方案（现代浏览器优先） #

直接使用CSS原生的round()函数，设置宽度向上取最近的8px整数倍即可，代码改动极小：

.banner {
  /* 第一个参数up代表向上取整，第二个参数为自适应内容宽度，第三个参数为对齐步长 */
  width: round(up, fit-content, 8px);
  border: solid black 1px;
  padding: 6px;
  text-align: left;
  box-sizing: border-box;
}

该方案兼容Chrome 119+、Firefox 118+、Safari 15.4+版本浏览器。

方案2：Grid布局方案（兼容旧版浏览器） #

通过在外层套一层Grid容器，利用网格列固定步长的特性实现宽度对齐8px倍数，兼容绝大多数市面浏览器：

HTML代码 #

<div class="banner-wrapper">
  <div class="banner">This is a banner!</div>
</div>

CSS代码 #

/* 外层Grid容器 */
.banner-wrapper {
  display: grid;
  /* 列宽固定为8px，自动填充尽可能多的列 */
  grid-template-columns: repeat(auto-fill, 8px);
  width: fit-content;
}
/* 原banner元素 */
.banner {
  /* 跨所有网格列，宽度自动等于外层容器宽度（8px整数倍） */
  grid-column: 1 / -1;
  border: solid black 1px;
  padding: 6px;
  text-align: left;
  box-sizing: border-box;
}

该方案兼容Chrome 57+、Firefox 52+、Safari 10.1+版本浏览器。

内容的提问来源于stack exchange，提问作者George Marti