CSS网格中的意外间隙

Question

I am attempting to follow this Stripe blog post:

https://stripe.com/blog/connect-front-end-experience

While my final product generally looks like what was in the tutorial, my browser seems to be placing in unintentional gaps. I'm reluctant to call them gaps since gap has a specific meaning in CSS grids, and my error seems to be more of a randomized rounding error.

Here are some pictures for comparison. Safari handles the grid more elegantly than chrome, but there are still issues. Notice the pixilated white lines in the photos.

Stripe final product:

My attempt on Safari:

My attempt on Chrome:

Here is the code I am using:

 .stripes { display: grid; grid: repeat(5, 200px) / repeat(10, 1fr); transform: skewY(-12deg); transform-origin: 0; } .stripes :nth-child(1) { grid-column: span 3; } .stripes :nth-child(2) { grid-area: 3 / span 3 / auto / -1; } .stripes :nth-child(3) { grid-row: 4; grid-column: span 5; } .blue { background: blue; } .red { background: red; } .special1 { background: linear-gradient(to bottom left, #1890ff, #42C6EB); } .special2{ background: linear-gradient(to left, #1890ff, #42C6EB); } .special3{ background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)); } .topRow { background: linear-gradient(to top, rgb(52, 173, 242), #1890ff); } .secondRow { background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) } .thirdRow { background: #42C6EB } .fourthRow { background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) } .fifthRow { background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) } 

 <div class="stripes"> <div class="special1"></div> <div class="special2"></div> <div class="special3"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> </div> 

After playing around a little bit, it seems the the issue lies in using the linear-gradient . When I switch from a gradient to a solid color, vertical bars go away, but not the tiny aliased lines running along the diagonal stripes. Any ideas?

Answer 1

This is a sub-pixel rendring issue . Unfortunately there is no trivial and generic fix since each browser handle the calculation differently when it comes to values smaller than 1px .

In your case, you can add a background to whole container in order to avoid (or at least minimize) this effect:

 .stripes { display: grid; grid: repeat(5, 200px) / repeat(10, 1fr); background:linear-gradient(to top,rgba(66, 198, 235, 0.2),#1890ff); transform: skewY(-12deg); transform-origin: 0; } .stripes :nth-child(1) { grid-column: span 3; } .stripes :nth-child(2) { grid-area: 3 / span 3 / auto / -1; } .stripes :nth-child(3) { grid-row: 4; grid-column: span 5; } .blue { background: blue; } .red { background: red; } .special1 { background: linear-gradient(to bottom left, #1890ff, #42C6EB); } .special2{ background: linear-gradient(to left, #1890ff, #42C6EB); } .special3{ background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)); } .topRow { background: linear-gradient(to top, rgb(52, 173, 242), #1890ff); } .secondRow { background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) } .thirdRow { background: #42C6EB } .fourthRow { background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) } .fifthRow { background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) } 

 <div class="stripes"> <div class="special1"></div> <div class="special2"></div> <div class="special3"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="topRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="secondRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="thirdRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fourthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> <div class="fifthRow"></div> </div> 

By the way if you are looking to achieve only the visual effect you can consider multiple background inside one container instead of all this code:

 .container { height:1000px; transform: skewY(-12deg); transform-origin:0; background: /*special 1*/ linear-gradient(to bottom left, #1890ff, #42C6EB) 0 0/calc(3*100%/10) calc(100%/5), /*special 2*/ linear-gradient(to left, #1890ff, #42C6EB) 100% calc(100%/2)/calc(3*100%/10) calc(100%/5), /*special 3*/ linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)) 0 calc(3*100%/4)/50% calc(100%/5), /*Top row*/ linear-gradient(to top, rgb(52, 173, 242), #1890ff) 0 0/100% calc(100%/5), /*second row*/ linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) 0 calc(100%/4)/100% calc(100%/5), /*third row*/ linear-gradient(#42C6EB, #42C6EB) 0 calc(100%/2)/100% calc(100%/5), /*fourth row*/ linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) 100% calc(3*100%/4)/50.1% calc(100%/5), /*fifth row*/ linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) 0 100%/100% calc(100%/5); background-repeat:no-repeat; } 

 <div class="container"> </div> 

Answer 2

There is a weird interaction with divs in HTML where if the next div doesn't start on the same line as the previous div ends, it creates whitespace. There are two fixes that I have found to this. One is to start each div on the same line as the end of the previous div. Another is to have a comment between the two divs like so :

</div><!--
--><div>