-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrelative.html
57 lines (53 loc) · 2.59 KB
/
relative.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<style>
.test {
color: white;
margin: 20px 0;
width: 800px;
background: red;
--padding: 10;
--columns: 3;
}
.test > div {
overflow: hidden;
}
@supports (display: layout(test)) {
.test {
display: layout(relative);
background: green;
}
}
</style>
<div class="test">
<div style="--relative-name: a; background: #9C27B0;">
1. Drinking vinegar seitan intelligentsia, cray knausgaard direct trade deep v vice. Fam microdosing listicle whatever semiotics yr kitsch leggings kale chips tilde selvage meggings crucifix disrupt portland.
</div>
<div style="--relative-name: b; background: #3F51B5;">
2. Pabst bitters knausgaard, art party jianbing ugh authentic sartorial affogato four dollar toast iPhone. IPhone offal pabst cloud bread air plant shoreditch.
</div>
<div style="--relative-name: c; background: #009688;">
3. Shaman pabst knausgaard raw denim next level, heirloom dreamcatcher whatever lomo. Slow-carb 8-bit biodiesel celiac. YOLO leggings mixtape activated charcoal lo-fi.
</div>
<div style="--relative-name: d; background: #795548;">
4. Umami shabby chic tumeric, portland cloud bread gastropub sartorial meh authentic brooklyn enamel pin disrupt DIY edison bulb. Narwhal beard seitan helvetica keytar. Sartorial plaid mlkshk disrupt waistcoat shabby chic. Hammock skateboard butcher pop-up kitsch before they sold out.
</div>
<div style="--relative-name: e; background: #E91E63;">
5. Iceland art party subway tile, freegan thundercats gentrify pok pok offal pug. Before they sold out skateboard hella paleo. Typewriter roof party pabst, listicle small batch tbh hella.
</div>
<div style="--relative-name: f; background: #F44336;">
6. Austin fixie XOXO franzen tattooed subway tile. Shoreditch street art typewriter dreamcatcher. Vegan mixtape bicycle rights tumblr, +1 ethical occupy letterpress sriracha polaroid master cleanse.
</div>
<div style="--relative-name: g; background: #607D8B;">
7. Shaman tote bag normcore listicle pop-up. Sriracha cronut meditation, semiotics hell of occupy glossier health goth DIY. Pok pok you probably haven't heard of them edison bulb asymmetrical PBR&B, activated charcoal tacos church-key tattooed prism butcher adaptogen.
</div>
<div style="--relative-name: h; background: #673AB7;">
8. Pour-over adaptogen selfies, scenester shabby chic lumbersexual portland activated charcoal wolf jianbing artisan freegan umami. Bespoke thundercats pickled stumptown.
</div>
</div>
<script>
(function() {
setTimeout(() => {
CSS.layoutWorklet.addModule('layout.js');
}, 1000);
})();
</script>