< Back to Frontend Friday Folks Index

Video Reel

Highlighted solution (371 characters)
1 
<r></r><r></r><r></r><r></r>
2 
<r></r><r></r><r></r><r></r>
3 
<r></r><r></r><r></r><r></r>
4 
<style>
5 
  r {
6 
    display:grid;
7 
    background: #191919;
8 
    height: 110px;
9 
  }
10 
  r:nth-child(even) {
11 
    margin-top:-50px;
12 
  }
13 
  body {
14 
    background: #5DBCF9;
15 
    display: grid;
16 
    grid-template-columns: 45px 140px 140px 45px;
17 
    gap: 40px 10px;
18 
    margin:-30px 0;
19 
  }
20 
</style>
21
It's a grid! I first tried it with nested grids: First for the columns, the inner ones for the rows. It looks like that renders a bit differently, since I couldn't get it to 100%. Thanks to Ariadne for sharing a simpler solution: It made me remove the inner grids, which worked out way better!
< Back to Frontend Friday Folks Index