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

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable