grid-lateral-004.html (1480B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <title>Example of default rule alignment and size</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 .grid::after { 32 position: absolute; 33 white-space: pre; 34 bottom: -8em; 35 content: attr(test); 36 font-size: 10px; 37 } 38 pre { 39 font-size: 10px; 40 } 41 </style> 42 43 <pre> 44 Example showing the default rule alignment and size: 45 </pre> 46 <div class="grid test1"><x>1</x><x>2</x></div> 47 48 49 <script> 50 window.onload = function() { 51 [...document.querySelectorAll('.grid')].forEach(function(elm) { 52 const cs = window.getComputedStyle(elm); 53 elm.setAttribute("test", 54 "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart + "\n" + 55 "column-rule-lateral-inset-end: " + cs.columnRuleLateralInsetEnd + "\n" + 56 "column-rule-width: " + cs.columnRuleWidth + "\n\n" + 57 "column-rule-longitudinal-inset-start: " + cs.columnRuleLongitudinalInsetStart + "\n" + 58 "column-rule-longitudinal-inset-end: " + cs.columnRuleLongitudinalInsetEnd + "\n" + 59 "column-rule-length: " + cs.columnRuleLength 60 ); 61 }); 62 } 63 </script>