grid-masonry-003.html (1741B)
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-extent' values in a Masonry grid layout.</title> 7 <style> 8 .grid { 9 position: relative; 10 display: inline-grid; 11 grid: masonry / 3ch 4ch 5ch; 12 gap: 20px; 13 margin-right: 20px; 14 margin-bottom: 40px; 15 background: lightgrey; 16 17 block-size: 180px; 18 align-tracks: start, center, end; 19 20 column-rule: solid blue; 21 column-rule-align: rule; 22 row-rule: 6px solid purple; 23 row-rule-extent: all-long; 24 row-rule-align: rule; 25 row-rule-longitudinal-inset: 2px; 26 } 27 28 .all-short { column-rule-extent: all-short; } 29 .all-start { column-rule-extent: all-start; } 30 .all-end { column-rule-extent: all-end; } 31 .all-long { column-rule-extent: all-long; } 32 33 x { 34 background: grey; 35 opacity: 0.5; 36 } 37 x:nth-child(1) { padding-block-start: 30px; } 38 x:nth-child(2) { } 39 x:nth-child(3) { padding-block-end: 20px; } 40 x:nth-child(7) { } 41 x:nth-child(8) { padding-block-end: 20px; } 42 43 .grid::after { 44 position: absolute; 45 bottom: -3em; 46 font-size: 10px; 47 font-style: italic; 48 vertical-align: top; 49 content: attr(test); 50 white-space: pre; 51 } 52 pre { font-size: 10px; } 53 </style> 54 55 <pre></pre> 56 57 <div class="grid all-short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div> 58 <div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div><br> 59 60 <script> 61 window.onload = function() { 62 [...document.querySelectorAll('.grid')].forEach(function(elm) { 63 const cs = window.getComputedStyle(elm); 64 elm.setAttribute("test", 65 "'column-rule-extent: " + cs.columnRuleExtent + "' \n" + 66 "'column-rule-align: " + cs.columnRuleAlign + "'" 67 ); 68 }); 69 } 70 </script>