Swiper.js网格布局slidesPerView自动宽度计算问题求助

针对你用Swiper.js实现时遇到的两个问题，给出以下修复方案：

问题1：宽度计算错误导致元素截断 #

Swiper默认会强制分配slide宽度，导致内容自适应的标签被截断。解决方式是关闭Swiper的自动宽度控制，让容器宽度由内容决定：

1. 修改Swiper配置：

const swiper = new Swiper('.swiper', {
  freeMode: true,
  slidesPerView: 'auto',
  autoHeight: false
});

2. 调整CSS，让swiper-wrapper宽度自适应内容：

.swiper-wrapper {
  width: fit-content;
  overflow: visible;
}

问题2：Flex布局无法实现紧密排列 #

放弃Swiper默认的Flex slide布局，改用CSS Grid实现两行Masonry效果，让标签紧密填充且宽度自适应内容：

1. 调整HTML结构（每个标签直接作为swiper-wrapper的子元素）：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="tag">标签1</div>
    <div class="tag">标签2很长很长很长</div>
    <div class="tag">标签3</div>
    <div class="tag">标签4中等长度</div>
    <div class="tag">标签5</div>
    <div class="tag">标签6超级长的标签内容示例</div>
  </div>
</div>

2. 用Grid布局实现两行Masonry：

.swiper-wrapper {
  display: grid;
  grid-template-rows: repeat(2, auto); /* 固定两行 */
  grid-auto-flow: column; /* 按列横向排列，实现Masonry填充 */
  gap: 10px; /* 标签之间的间距 */
}

.tag {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  white-space: nowrap; /* 防止标签换行 */
}

这样修改后，标签会自动填充两行空间，宽度自适应内容，且整体支持横向滚动，完全匹配你想要的布局效果。

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