grid-longitudinal-001.html (2395B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <title>Examples of rule longitudinal properties</title> 7 <style> 8 html,body { 9 color:black; background-color:white; font:20px/1 monospace; 10 } 11 12 .grid { 13 position: relative; 14 display: inline-grid; 15 grid-template-columns: 20px 30px 40px; 16 gap: 20px; 17 18 column-rule: 6px solid blue; 19 20 row-rule: 6px solid purple; 21 row-rule-extent: long; 22 23 border: 2px solid; 24 margin-right: 15px; 25 margin-bottom: 30px; 26 background: lightgrey; 27 } 28 29 .test1 { 30 column-rule-longitudinal-inset: 4px; 31 row-rule-longitudinal-inset: 4px; 32 column-rule-longitudinal-edge-inset: 4px; 33 row-rule-longitudinal-edge-inset: 4px; 34 } 35 36 .test2 { 37 column-rule-length: 50%; 38 row-rule-length: 50%; 39 column-rule-longitudinal-inset: auto; 40 row-rule-longitudinal-inset: auto; 41 column-rule-longitudinal-edge-inset: auto; 42 row-rule-longitudinal-edge-inset: auto; 43 } 44 45 .test3 { 46 column-rule-width: 100%; 47 row-rule-width: 100%; 48 } 49 50 .test4 { 51 column-rule-width: 30%; 52 row-rule-width: 30%; 53 column-rule-lateral-inset-end: 0px; 54 row-rule-lateral-inset-end: 0px; 55 } 56 57 .test5 { 58 column-rule-width: 150%; 59 row-rule-width: 150%; 60 column-rule-lateral-inset-end: 0px; 61 row-rule-lateral-inset-end: 0px; 62 } 63 64 x { 65 block-size: 48px; 66 background: grey; 67 opacity: 0.5; 68 } 69 x:nth-child(2), x:nth-child(6) { 70 grid-column: span 2; 71 } 72 73 .grid::after { 74 position: absolute; 75 top: 120px; 76 width: 500px; 77 font-size: 10px; 78 vertical-align: top; 79 white-space: pre; 80 } 81 pre { font-size: 10px; } 82 83 .test1::after { content: "*-rule-length: auto;\0Alongitudinal insets: 4px"; } 84 .test2::after { content: "*-rule-length: 50%;\0Alongitudinal insets: auto"; } 85 .test3::after { content: "*-rule-width: 100%"; } 86 .test4::after { content: "*-rule-width: 30%;\0Alateral end insets: 0px"; } 87 .test5::after { content: "*-rule-width: 150%;\0Alateral end insets: 0px"; } 88 </style> 89 <pre>Note that the grid items have 'opacity: 0.5' to show 90 any rules underneath them.</pre> 91 <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> 92 <div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> 93 <div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> 94 <div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> 95 <div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>