使用 Grid 网格布局和 JavaScript 实现灵活的页面布局

在网页设计和开发中，实现灵活的页面布局是一个重要的任务。除了使用 Flex 布局，我们还可以利用 Grid 网格布局和 JavaScript 来实现灵活的布局。Grid 网格布局是一种二维布局系统，可以将页面划分为行和列，让我们能够更精确地控制元素在页面中的位置和大小。而 JavaScript 则提供了动态操作 DOM 的能力，使我们能够根据需要改变页面的布局和内容。

在开始之前，我们需要了解一些基本的 HTML、CSS 和 JavaScript 知识。以下是一个简单的示例，展示了如何使用 Grid 网格布局和 JavaScript 来实现一个灵活的页面布局。

首先，在 HTML 中创建一个包含一些元素的容器：

<div class="grid-container">
  <div class