Dev Stack Source

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> ...

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 : Sadly, there is currently no way in the CSS Grid spec to style grid-gap . I came up with a solution that works well though that involves just html and css: show border grid lines only between elements For instance: if one has a 5x5 grid of squares, is the only way to get colored grid lines to fill the grid with 25 elements and apply borders to those same elements? You could do that, but grid borders do not collapse the same way that table borders can with the border-collapse property, and unlike grid gaps they'll be applied to the perimeter of your grid along with the inner borders, which may not be desired. Plus, if you have a grid-gap declaration, the gaps will separate your grid item borders much like border-collapse: separate does with table borders. grid-gap is the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a backgr...

Answer : IE11 uses an older version of the Grid specification. The properties you are using don't exist in the older grid spec. Using prefixes makes no difference. Here are three problems I see right off the bat. repeat() The repeat() function doesn't exist in the older spec, so it isn't supported by IE11. You need to use the correct syntax, which is covered in another answer to this post, or declare all row and column lengths. Instead of: .grid { display: -ms-grid; display: grid; -ms-grid-columns: repeat( 4, 1fr ); grid-template-columns: repeat( 4, 1fr ); -ms-grid-rows: repeat( 4, 270px ); grid-template-rows: repeat( 4, 270px ); grid-gap: 30px; } Use: .grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; /* adjusted */ grid-template-columns: repeat( 4, 1fr ); -ms-grid-rows: 270px 270px 270px 270px; /* adjusted */ grid-template-rows: repeat( 4, 270px ); grid-gap: 30px; } Older spec re...