positioning items from created elements javascript

trying to study CSS/javascript and build something like the below Facebook posts.
enter image description here

I’ve tried it with CSS grid and had problems where it overlapped all items when using inside for-loop (create multiple feeds like a Facebook website).

for (let i = 0; i < 5; i++) {
    var container = document.querySelector('.content');
    var profileImage = document.createElement("img");
    var username = document.createElement("p");
    container.append(profileImage, username);
}

I think the grid isn’t the correct tool for a dynamically loaded website?
is there any other CSS I can try? I don’t even know what to look for? or study. 🙁

FYI- Tried it without Grid. it didn’t look good, but all the posts displayed correctly from for-loop.