grid-longitudinal-003.html (1058B)
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 overflow and clipping.</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: 2ch 2ch; 16 gap: 20px; 17 18 column-rule: 6px solid blue; 19 column-rule-longitudinal-edge-inset: min(-100vw, -100vh); 20 21 row-rule: 6px solid lime; 22 row-rule-longitudinal-edge-inset: min(-100vw, -100vh); 23 24 border: 4px dotted; 25 margin: 30px; 26 padding: 1ch; 27 background: lightgrey; 28 } 29 30 .test2 { overflow: hidden; } 31 32 x { 33 block-size: 48px; 34 background: grey; 35 } 36 37 pre { 38 font-size: 10px; 39 } 40 </style> 41 <body> 42 <pre>Both grids have '*-edge-inset: min(-100vw, -100vh)'. 43 The right grid has 'overflow: hidden' which clips its rules at the padding edge.</pre> 44 <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x></div> 45 <div class="grid test2" style="top:100px "><x>1</x><x>2</x><x>3</x><x>4</x></div> 46 </body>