File: grid-gap-decorations-005-ref.html

package info (click to toggle)
thunderbird 1%3A143.0.1-1
  • links: PTS, VCS
  • area: main
  • in suites: experimental
  • size: 4,703,968 kB
  • sloc: cpp: 7,770,492; javascript: 5,943,842; ansic: 3,918,754; python: 1,418,263; xml: 653,354; asm: 474,045; java: 183,079; sh: 111,238; makefile: 20,410; perl: 14,359; objc: 13,059; yacc: 4,583; pascal: 3,405; lex: 1,720; ruby: 999; exp: 762; sql: 715; awk: 580; php: 436; lisp: 430; sed: 69; csh: 10
file content (62 lines) | stat: -rw-r--r-- 1,259 bytes parent folder | download | duplicates (7) 
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
58
59
60
61
62
 
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<style>
  body {
    margin: 0px;
  }

  .container {
    width: 110px;
    height: 110px;
    background: green;

    column-count: 2;
    column-gap: 10px;

    column-rule-color: pink;
    column-rule-style: double;
    column-rule-width: 5px;

    overflow: hidden;
  }

  .item {
    background: skyblue;
    height: 50px;
    width: 100%;
    margin: 0;
  }

  .double {
    margin: 0px;
    padding: 0px;
    height: 0px;

    width: 110px;
    border-bottom: 5px double;
    border-color: pink;
    position: absolute;
    /*
      The top position of the double border is set to 52.5px
      to account for 10px gap and 5px height of the double border,
      in order to center it in the gap.
    */
    top: 52.5px;
  }

  /* For 2x2 grid-like layout, add a 10px bottom margin to
    odd children(#1 & #3) to simulate a horizontal row gap.*/
  .item:nth-child(odd) {
    margin-bottom: 10px;
  }
</style>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="double">
</div>