Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Scott Nichols
Scott Nichols
3,331 Points
Posted by Scott Nichols
Scott Nichols
3,331 Points

How do you add data dynamically to a css Grid?

I just learned about CSS Grid and understand the flexibility it offers. However, no where in the course is it explained how to dynamically display data from an array like one would do using the table options.

Here's how I dynamically added elements from an array to a table object.

    for (i=0; i<a_timeLogs.length; i++) {
        objRow = objTblBody.insertRow(i)
        a_objCells = []
        for (j=0; j<a_timeLogs[i].length; j++) {
            a_objCells.push(objRow.insertCell(j))
            cell_idx = a_objCells.length - 1
            a_objCells[cell_idx].innerHTML = a_timeLogs[i][j]

        }
    }

If I use the CSS Grid instead of Table to display data, what is the best method show header titles for the data, and then dynamically create the rows of columns in the body, with the total being displayed in the footer area of the Grid definition?

If I use the grid-template-areas, then how to dynamically create data to be displayed in those areas?

I have reviewed the course at least 3 times, and I can't seem to find the solution.

Can anyone help?

Thanks,

Scott.