In Apple’s iTunes software, albums are shown in a grid of selectable pictures, clicking on which reveals a full-width box with a tracklist under the row of the currently selected item. Here is a screenshot that demonstrates that UI, and here is a video where it can be seen interacted with (at 54 seconds).
I have a basic HTML/CSS/JS setup for displaying something like this in the snippet below. However, I don’t understand how to move the full-width element to the needed index of the parent element.
Is there a reliable way to do this?
const parent = document.getElementById("grid-parent");
for (let i = 0; i < 10; i++) {
const album = document.createElement("button");
album.classList.add("album");
parent.appendChild(album);
album.addEventListener("click", (event) => {
/* move the tracklist div element, to be placed after the last element of the row that the clicked album element is in. */
});
}
const tracklist = document.createElement("div");
tracklist.classList.add("tracklist");
parent.appendChild(tracklist);#grid-parent {
display: grid;
grid-template-columns: repeat(auto-fill, 10rem);
grid-gap: 1rem;
justify-content: space-between;
}
.album {
width: 10rem;
height: 10rem;
background-color: aqua;
}
.tracklist {
grid-column: 1 / -1;
background-color: darkseagreen;
height: 15rem;
}<div id="grid-parent"/>