如何让Grid容器自适应内容？切换元素后宽度异常求助

问题核心 #

你的services容器使用Grid布局将列表和描述放在同一单元格，但fit-content会取两个子元素的最大宽度（即描述的370px）作为列宽，导致无论列表/描述是否可见，容器宽度始终固定为最大宽度，无法自适应当前显示内容。

解决方案一：CSS布局调整（无JS依赖） #

通过相对定位+静态/绝对定位切换，让容器仅计算当前处于正常流的元素宽度，实现自适应效果：

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

li:last-child {
  margin-top: 10px;
}

a {
  cursor: pointer
}

/* 改用相对定位+inline-block实现自适应宽度 */
.services {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: #a3b3f6;
}

.services-list {
  max-width: max-content;
  position: static; /* 默认处于正常流，容器计算其宽度 */
  opacity: 1;
  transition: all 0.4s ease-in-out;
}

.services-description {
  max-width: 370px;
  position: absolute; /* 默认脱离正常流，不影响容器宽度 */
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

/* 隐藏时将元素移出正常流 */
.hide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* 显示时将元素放回正常流，容器计算其宽度 */
.reveal {
  position: static;
  opacity: 1;
}

JS代码（可保留原逻辑，无需修改） #

$('.read-more').click(function() {
  var index = $('.read-more').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

$('.read-less').click(function() {
  var index = $('.read-less').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

解决方案二：JS动态设置容器宽度 #

如果需要保留Grid布局，可通过JS在切换时动态将容器宽度设置为当前显示元素的宽度：

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

li:last-child {
  margin-top: 10px;
}

a {
  cursor: pointer
}

.services {
  width: auto; /* 去掉固定宽度 */
  display: grid;
  grid-template-columns: fit-content(100%);
  overflow: hidden;
  background: #a3b3f6;
}

.services-list {
  max-width: max-content;
  grid-area: 1/1;
  opacity: 1;
  margin-left: 0;
  transition: all 0.4s ease-in-out;
}

.services-description {
  max-width: 370px;
  grid-area: 1/1;
  opacity: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.hide {
  opacity: 0;
  margin-left: -100%;
}

.reveal {
  opacity: 1;
  margin-left: 0;
}

修改后的JS代码 #

$('.read-more').click(function() {
  var $services = $(this).closest('.services');
  var $list = $services.find('.services-list');
  var $desc = $services.find('.services-description');
  
  $list.addClass('hide');
  $desc.addClass('reveal');
  
  // 动态设置容器宽度为描述的实际宽度
  setTimeout(() => {
    $services.width($desc.outerWidth());
  }, 0);
});

$('.read-less').click(function() {
  var $services = $(this).closest('.services');
  var $list = $services.find('.services-list');
  var $desc = $services.find('.services-description');
  
  $list.removeClass('hide');
  $desc.removeClass('reveal');
  
  // 动态设置容器宽度为列表的实际宽度
  setTimeout(() => {
    $services.width($list.outerWidth());
  }, 0);
});

完整HTML代码（两种方案通用） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="services">
    <ul class="services-list">
      <li>Service 1</li>
      <li>Service 2</li>
      <li>Service 3</li>
      <li><a class="read-more button">Read More</a></li>
    </ul>
    <ul class="services-description">
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis ut ex eget tincidunt. Aliquam euismod consectetur varius. Phasellus laoreet fringilla felis, eget porta neque pretium vitae. Fusce viverra mattis sem vel mollis. Nam non aliquam diam, quis sagittis quam. Fusce tempor dolor libero, eget cursus mauris euismod vel.</p>
      </li>
      <li><a class="read-less button">Read Less</a></li>
    </ul>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Katarina Perović