grid-lateral-002.html (1267B)
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 column-rule-lateral-inset-start</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: auto auto; 16 gap: 4px 16px; 17 18 column-rule: solid blue; 19 20 margin-right: 8ch; 21 background: lightgrey; 22 padding: 10px; 23 } 24 25 x { 26 inline-size: 50px; 27 block-size: 1.5em; 28 background: grey; 29 } 30 31 .test1 { 32 column-rule-lateral-inset-start: 0; 33 } 34 .test2 { 35 column-rule-lateral-inset-start: 3px; 36 } 37 38 .grid::after { 39 position: absolute; 40 white-space: pre; 41 bottom: -2em; 42 content: attr(test); 43 font-size: 10px; 44 } 45 pre { 46 font-size: 10px; 47 } 48 </style> 49 50 <pre> 51 Examples of aligning a rule at the start of the gap with a lateral offset: 52 </pre> 53 <div class="grid test1"><x>1</x><x>2</x></div> 54 <div class="grid test2"><x>1</x><x>2</x></div> 55 56 57 <script> 58 window.onload = function() { 59 [...document.querySelectorAll('.grid')].forEach(function(elm) { 60 const cs = window.getComputedStyle(elm); 61 elm.setAttribute("test", 62 "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart 63 ); 64 }); 65 } 66 </script>