引入外部JavaScript后Grid布局失效，移除则恢复，求原因？

你的JavaScript代码直接破坏了Grid布局的结构：所有.container元素原本是.grid容器的子元素，而Grid布局规则正是作用在.grid这个父容器上的——只有当元素作为Grid容器的直接子元素时，才会被网格布局规则管控。

但你的代码里做了两件事导致布局失效：

1. 先把所有.container从原位置移除
2. 然后将它们直接追加到document.body上

看这段关键代码：

// Append the divs in the new order
divArray.forEach(div => document.body.appendChild(div));

这些元素脱离了.grid容器的管辖，自然不会再以网格形式展示。

修改代码，把排序后的元素重新放回.grid容器内，而不是直接加到body上：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有.container元素
  const divs = document.querySelectorAll('.container');
  // 转成数组方便排序
  const divArray = Array.from(divs);
  // 按data-time属性排序
  divArray.sort(function(a, b) {
    const timeA = new Date(a.getAttribute('data-time'));
    const timeB = new Date(b.getAttribute('data-time'));
    return timeA - timeB;
  });

  // 获取Grid布局的容器
  const gridContainer = document.querySelector('.grid');
  // 清空容器原有内容
  gridContainer.innerHTML = '';
  // 将排序后的元素追加回Grid容器
  divArray.forEach(div => gridContainer.appendChild(div));
});

另外提个小细节：你的代码里注释写的是Select all div elements with the class 'time-div'，但实际选择的是.container，建议把注释修正，避免后续维护混淆。

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