< Back to Frontend Friday Folks Index

Interleaved

Highlighted solution (480 characters)
1 
<div class="m"></div>
2 
<div class="t"></div>
3 
<div class="m"></div>
4 
<div class="t"></div>
5 
<div class="m"></div>
6 
<style>
7 
  body {
8 
    background:#1A4341;
9 
    display: flex;
10 
    justify-content: center;
11 
    gap: 25px;
12 
    margin: 0;
13 
  }
14 
  .t {
15 
    background: #998235;
16 
    border-radius: 0 0 25px 25px;
17 
  }
18 
  .m {
19 
    align-self: flex-end;
20 
    background: #F3AC3C;
21 
    border-radius: 25px 25px 0 0;
22 
  }
23 
  div {
24 
    width: 50px;
25 
    height: 200px;
26 
    background: #dd6b4d;
27 
  }
28 
</style>
This is a straight forward solution using Flexbox. Even though you may see multiple rows, it's easier to think of it all as one row, where the stalactites and stalagmites are aligned differently.
Highlighted solution (486 characters)
1 
<div></div>
2 
<div class="t"></div>
3 
<div></div>
4 
<div class="t"></div>
5 
<div></div>
6 
<div class="m"></div>
7 
<div class="m"></div>
8 
<div class="m"></div>
9 
<style>
10 
  body {
11 
    background:#1A4341;
12 
    display: grid;
13 
    grid-template: repeat(3, 100px) / repeat(5, 50px);
14 
    gap: 0 25px;
15 
    margin: 0 25px;
16 
  }
17 
  .t,.m {
18 
    grid-row: span 2;
19 
  }
20 
  .t {
21 
    background: #998235;
22 
    border-radius: 0 0 25px 25px;
23 
  }
24 
  .m {
25 
    background: #F3AC3C;
26 
    border-radius: 25px 25px 0 0;
27 
  }
28 
</style>
Since we first saw this as multiple rows, we wanted to try it as a grid as well. This solution uses multiple row spans to achieve the height effect.
Highlighted solution (1157 characters)
1 
<div class="m"></div>
2 
<div class="t"></div>
3 
<div class="m"></div>
4 
<div class="t"></div>
5 
<div class="m"></div>
6 
<style>
7 
  body {
8 
    background: #1A4341;
9 
    display: flex;
10 
    gap: 0 25px;
11 
    margin: 0 25px;
12 
  }
13 
  div {
14 
    width: 50px;
15 
    height: 100%;
16 
    animation: 500ms 1s alternate ease-in-out infinite;
17 
  }
18 
  .t {
19 
    background:
20 
      radial-gradient(circle, #998235 25px, transparent 0),
21 
      linear-gradient(#998235 175px, transparent 0)
22 
    ;
23 
    background-position: 0px 25px, 0px 0px;
24 
    background-size: 100% 100%, 100% 200%;
25 
    animation-name: sliding-t;
26 
  }
27 
  .m {
28 
    background:
29 
      radial-gradient(circle, #F3AC3C 25px, transparent 0),
30 
      linear-gradient(to top, #F3AC3C 175px, transparent 0)
31 
    ;
32 
    background-position: 0px -25px, 0px -150px;
33 
    background-size: 100% 100%, 100% 150%;
34 
    animation-name: sliding-m;
35 
  }
36 
  @keyframes sliding-m {
37 
    0% {
38 
      background-position: 0 -25px, 0 -150px;
39 
    }
40 
    100% {
41 
      background-position: 0 125px, 0 0;
42 
    }
43 
  }
44 
  @keyframes sliding-t {
45 
    0% {
46 
      background-position: 0 25px, 0 0;
47 
    }
48 
    100% {
49 
      background-position: 0 -125px, 0 -150px;
50 
    }
51 
  }
52 
</style>
The animated version moves the background of the divs around to create the animation effect. So instead of moving the containers around with their positioning, it uses background-position and background-size to position the gradients in a way they can move without "overflowing". The overflow effect can cause a part of the gradient to appear on the other side of the container.
Whenever I think of learning resources for Flexbox or Grid, I need to link to Flexbox Froggy and Grid Garden.
< Back to Frontend Friday Folks Index