如何实现随内容自适应增长且保持比例的HTML动态网格？

核心逻辑 #

通过监听单元格内容变化，动态计算网格整体尺寸，维持单元格预设比例，直到网格宽度达到最大值后触发横向滚动。

实现代码 #

1. HTML结构

<div class="grid-container">
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <!-- 可添加更多单元格 -->
</div>

2. 基础CSS样式

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  max-width: 1200px; /* 自定义网格最大宽度 */
  overflow-x: auto;
  padding: 16px;
}

.grid-item {
  position: relative;
  aspect-ratio: 1/1; /* 预设单元格比例，可自定义为2/1、3/2等 */
  border: 1px solid #eee;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

3. JavaScript动态控制逻辑

const gridContainer = document.querySelector('.grid-container');
const gridItems = document.querySelectorAll('.grid-item');
const maxGridWidth = 1200; // 与CSS中max-width保持一致

// 计算并更新网格尺寸
function updateGridSize() {
  // 获取所有单元格内容的最大高度
  let maxContentHeight = 0;
  gridItems.forEach(item => {
    const contentHeight = item.querySelector('.content').scrollHeight;
    if (contentHeight > maxContentHeight) maxContentHeight = contentHeight;
  });

  // 根据单元格比例计算目标宽度（以1:1为例）
  const targetItemWidth = maxContentHeight;
  // 计算网格整体宽度（包含gap间距）
  const targetGridWidth = targetItemWidth * gridItems.length + 8 * (gridItems.length - 1);

  if (targetGridWidth <= maxGridWidth) {
    // 未达最大宽度，按内容尺寸缩放所有单元格
    gridItems.forEach(item => item.style.width = `${targetItemWidth}px`);
    gridContainer.style.width = `${targetGridWidth}px`;
  } else {
    // 已达最大宽度，恢复自动布局并开启滚动
    gridContainer.style.width = '100%';
    gridItems.forEach(item => item.style.width = '');
  }
}

// 监听内容变化自动更新
gridItems.forEach(item => {
  const content = item.querySelector('.content');
  const observer = new MutationObserver(updateGridSize);
  observer.observe(content, { childList: true, subtree: true, characterData: true });
});

// 初始化执行一次
updateGridSize();

关键说明 #

• 若需兼容不支持aspect-ratio的旧浏览器，可通过padding-top实现比例（如1:1比例设置padding-top: 100%）
• MutationObserver会自动监听内容的新增、删除或文本变化，无需手动触发更新
• 计算网格整体宽度时需包含单元格之间的gap间距，避免布局错位

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