Is splitting of an ag-Grid across multiple DIVs possible?

Question

Working on a web-app project that uses ag-Grid for tabular data within a Vue2.js component, with 2 or 3 fields and a subsection accessible through a tree-format descending below each record.

Since the grid is so narrow, I'd like to have it span across several DIVs. The app is meant to be view-able on either desktops, tablets, or mobile phones, so responsive design of the tabular data is important (single column on mobiles, multiple columns (DIVs) on a desktop, for example).

Has anyone had experience with this? Googling keeps throwing me back to the ag-Grid documentation on grouping an aggregation, but that does not really address what I am looking for.

Supporting image: Visual idea of what I'd like to accomplish...blue column just represents the start of the grid, and it's content wraps to the other columns.

Answer 1

It appears that modifying ag-Grid's table output structure (built conveniently with DIVs) using CSS3's Multi-column Layout support via display: inline-block and column-count is the direction of solution I am looking for.

By applying them to the style for the DIV that emulates the outer <table> rule/structure, it appears to 'auto split' the data rows within into the number of columns I decide. Next is to attempt to modify that using media queries based on screen width.

Fiddle example for using column-count : https://jsfiddle.net/digitalmouse/9casq77v/

So unless anyone else can provide something even better, this looks like the way to go.