使用 CSS Grid 实现自适应内容的容器-html教程-PHP中文网

使用 CSS Grid 实现自适应内容的容器

花韻仙語

发布： 2025-10-28 09:14:01

原创

843人浏览过

使用 css grid 实现自适应内容的容器

本文探讨了如何使用 CSS Grid 布局创建一个能够根据内容自动调整大小的容器。重点在于解决容器在内容切换时，始终保持最大内容宽度的问题。通过调整隐藏元素的高度和宽度，以及利用 `width: unset` 属性，可以实现容器尺寸的动态适应，从而优化用户体验。

在使用 CSS Grid 布局时，我们经常需要创建一个能够根据内部内容自动调整大小的容器。这种自适应性对于构建响应式和动态的用户界面至关重要。本文将深入探讨如何使用 CSS Grid 实现这一目标，并解决在内容切换时可能遇到的问题。

问题描述

假设我们有一个 Grid 容器，其中包含两个元素：一个列表和一个描述。当点击按钮时，列表和描述会切换显示。我们的目标是让 Grid 容器始终适应当前可见的内容，而不是保持两者中最大内容的宽度。

解决方案

关键在于理解 Grid 容器如何处理隐藏的元素。即使使用 opacity: 0 和 margin-left: -100% 等方法隐藏元素，它们仍然会影响容器的尺寸。为了解决这个问题，我们需要确保隐藏的元素不占用容器的任何空间。

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

以下是修改后的 CSS 代码：

Calliper 文档对比神器

文档内容对比神器

查看详情

* {
  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;
  height: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.hide {
  opacity: 0;
  width: 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;
}

登录后复制

关键的修改在于 .services-description 和 .hide 类的定义。我们添加了 width: 0 和 height: 0，确保在隐藏状态下，描述元素不占用任何空间。同时，在 .reveal 类中，我们使用 width: unset 和 height: unset 来恢复描述元素的原始宽度和高度。

以下是 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>

登录后复制

以下是控制元素切换的 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');
});

登录后复制

这段代码使用 jQuery 来切换 .services-list 和 .services-description 元素的 .hide 和 .reveal 类，从而实现内容的切换效果。

代码解释

width: 0; height: 0;: 这两个属性的组合确保了隐藏的元素在布局中不占据任何空间，从而使容器能够适应可见内容的大小。
width: unset; height: unset;: unset 关键字将属性重置为其继承值（如果存在）或其初始值（如果不存在）。在这种情况下，它允许描述元素恢复其原始宽度，以便在显示时正确呈现。
grid-template-columns: fit-content(100%) fit-content(100%);: fit-content 属性限制了列的最大宽度，使其不超过内容所需的宽度，同时允许其缩小到可用空间的最小值。