ag-Grid是一个用于构建数据网格的JavaScript库，它本身并没有直接提供垂直方向排列的网格布局功能。然而，可以通过一些技巧和CSS样式来实现垂直方向排列的网格布局。

以下是一个使用ag-Grid实现垂直方向排列的网格布局的示例代码：

HTML部分：

CSS部分：

.grid-container {
  display: flex;
  flex-direction: column;
}

.ag-theme-alpine {
  height: 200px; /* 设置每个网格的高度 */
  width: 100%; /* 设置每个网格的宽度 */
  margin-bottom: 10px; /* 设置网格之间的间距 */
}

JavaScript部分：

var gridOptions1 = {
  // 第一个网格的配置
  columnDefs: [
    // 列定义...
  ],
  rowData: [
    // 行数据...
  ]
};

var gridOptions2 = {
  // 第二个网格的配置
  columnDefs: [
    // 列定义...
  ],
  rowData: [
    // 行数据...
  ]
};

var gridOptions3 = {
  // 第三个网格的配置
  columnDefs: [
    // 列定义...
  ],
  rowData: [
    // 行数据...
  ]
};

// 创建网格并将其附加到相应的元素中
var grid1 = new agGrid.Grid(document.querySelector('#grid1'), gridOptions1);
var grid2 = new agGrid.Grid(document.querySelector('#grid2'), gridOptions2);
var grid3 = new agGrid.Grid(document.querySelector('#grid3'), gridOptions3);

在上述示例中，我们使用了flexbox布局将网格容器设置为垂直方向排列。每个网格都被赋予了相同的高度，以及一些间距来分隔它们。你可以根据自己的需求调整这些样式。

最后，通过创建三个不同的ag-Grid实例，并将它们分别附加到不同的元素中，我们可以实现垂直方向排列的网格布局。

请注意，以上示例中的代码只是一种实现垂直方向排列的网格布局的方法，你可以根据自己的需求进行调整和修改。