使用 CSS Grid 实现自适应内容容器：动态调整容器大小-html教程-PHP中文网

使用 CSS Grid 实现自适应内容容器：动态调整容器大小

霞舞

发布： 2025-10-26 09:35:17

原创

617人浏览过

使用 css grid 实现自适应内容容器：动态调整容器大小

本文旨在解决 CSS Grid 布局中容器大小自适应内容变化的问题，重点在于如何通过 CSS 和 JavaScript 配合，实现容器根据内部列表和描述内容的切换，动态调整自身大小以适应当前显示的内容。我们将提供详细的代码示例和解释，帮助你理解并掌握这种灵活的布局技巧。

在构建动态 Web 页面时，经常需要容器根据其内容的大小自动调整。在使用 CSS Grid 布局时，如果容器内的元素通过 JavaScript 动态显示或隐藏，可能会遇到容器大小无法正确自适应的问题。本文将介绍一种解决方案，通过结合 CSS 和 JavaScript，实现 Grid 容器根据内容变化自动调整大小。

问题描述

假设我们有一个 Grid 容器，其中包含两个元素：一个列表和一个描述。默认情况下，列表显示，描述隐藏。当点击“Read More”按钮时，列表隐藏，描述显示；点击“Read Less”按钮时，描述隐藏，列表显示。我们希望容器的大小能够根据当前显示的内容自动调整。

解决方案

核心思路是在隐藏元素时，不仅要设置 opacity: 0 和 margin-left: -100%，还要将其 width 和 height 设置为 0。当元素需要显示时，将其 width 和 height 恢复到初始状态。

立即学习“前端免费学习笔记（深入）”；

1. HTML 结构

Calliper 文档对比神器

文档内容对比神器

查看详情

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

登录后复制

2. CSS 样式

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

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

a {
  cursor: pointer
}

.services {
  width: fit-content;
  display: grid;
  grid-template-columns: fit-content(100%) 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;
  width: 0; /* 关键：设置宽度为 0 */
  height: 0; /* 关键：设置高度为 0 */
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.hide {
  opacity: 0;
  width: 0; /* 关键：设置宽度为 0 */
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.reveal {
  opacity: 1;
  margin-left: 0;
  width: unset; /* 关键：取消宽度限制 */
  height: unset; /* 关键：取消高度限制 */
  transition: all 0.4s ease-in-out;
}

登录后复制

3. JavaScript 代码

$('.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');
});

登录后复制

代码解释

CSS:
- .services：设置容器为 Grid 布局，并使用 grid-template-columns: fit-content(100%) fit-content(100%); 确保列宽自适应内容。
- .services-description：初始状态下，除了设置 opacity: 0 和 margin-left: -100% 之外，还设置了 width: 0 和 height: 0。这确保了描述元素在隐藏时不会影响容器的大小。
- .hide：与 .services-description 类似，设置 width: 0。
- .reveal：当描述元素显示时，使用 width: unset 和 height: unset 移除宽度和高度的限制，使其能够根据内容自动调整大小。
JavaScript:
- 使用 jQuery 为 "Read More" 和 "Read Less" 按钮添加点击事件处理程序。
- toggleClass('hide') 和 toggleClass('reveal') 用于切换列表和描述的显示状态。