.video-metadata{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } .video-metadata > .video-metadata-thumbnail-box{ grid-row: 1 / span 2; } .video-metadata > .title{ word-wrap:break-word; grid-row: 1; } .video-metadata > h2{ grid-row: 2; font-size: 15px; } .video-metadata > hr{ grid-row: 3; grid-column: 1 / span 2; width: 100%; } .comments{ grid-row-gap: 10px; display: grid; align-content:start; } .comment{ display:grid; grid-template-columns: auto auto 100px 1fr; grid-template-rows: 0fr 0fr 0fr 0fr; background-color: #dadada; justify-content: start; } .comment .author-avatar{ grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-right: 5px; height:32px; width:32px; } .comment address{ grid-column: 2; grid-row: 1; margin-right:15px; white-space: nowrap; overflow:hidden; } .comment .text{ grid-column: 2 / span 3; grid-row: 2; white-space: pre-wrap; min-width: 0; } .comment time{ grid-column: 3; grid-row: 1; white-space: nowrap; } .comment .likes{ grid-column:2; grid-row:3; font-weight:bold; white-space: nowrap; } .comment .replies{ grid-column:2 / span 2; grid-row:4; justify-self:start; } .more-comments{ justify-self:center; }