Border After Each Row In CSS Grid
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> <div>4444</div> <div>555555555</div> <div>99999999999</div> </div> </div>
Comments
Post a Comment