Newbe Dev Stack

Answer : Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property. const COLORS = [ '#FE9', '#9AF', '#F9A', "#AFA", "#FA7" ]; function addItem(container, template) { let color = COLORS[_.random(COLORS.length - 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num })); } $(() => { const tmpl = $('#item_template').html() const container = $('#app'); for(let i=0; i<5; i++) { addItem(container, tmpl); } $('#add_el').click(() => { addItem(container, tmpl); }) container.on('click', '.del_el', (e) => { $(e.target).closest('.item').remove(); }); }); .container { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, 120px); grid-row-gap: .5em; grid-column-gap: 1em; } .contain...

Answer : Instead of justify-content to center content you could add additional columns before and after your content, both with 1fr . Then position the first div and the div after .line to the start at the second column. Fiddle * { box-sizing: border-box; } .outer { width: 80%; margin: 0 auto; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: 1fr repeat(3, auto) 1fr; } .wrapper>div:not(.line) { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper > div:first-of-type, .line + div { grid-column: 2; } .line { grid-column: 1 / -1; height: 1px; background: black; } <div class="outer"> <div class="wrapper"> <div>1111111</div> <div>222</div> <div>3333333333</div> <div class="line"></div> ...