grid-masonry-002.html (2369B)
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: all-*' 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: 160px; 18 align-content: center; 19 align-tracks: center; 20 21 column-rule: solid blue; 22 column-rule-align: rule; 23 row-rule: 6px solid purple; 24 row-rule-align: rule; 25 } 26 27 .all-start { column-rule-extent: all-start; column-rule-lateral-inset-start: 0; } 28 .all-end { column-rule-extent: all-end; column-rule-lateral-inset-end: 0; } 29 .all-short { column-rule-extent: all-short; } 30 .all-long { column-rule-extent: all-long; } 31 32 x { 33 background: grey; 34 opacity: 0.5; 35 } 36 x:nth-child(1) { } 37 x:nth-child(2) { } 38 x:nth-child(3) { padding-block-end: 30px; } 39 x:nth-child(7) { } 40 x:nth-child(8) { padding-block-end: 20px; } 41 42 .grid::after { 43 position: absolute; 44 bottom: -2.5em; 45 font-size: 10px; 46 font-style: italic; 47 vertical-align: top; 48 content: attr(test); 49 white-space: pre; 50 } 51 pre { font-size: 10px; } 52 </style> 53 54 <pre>All have 'row-rule-align: rule' to make the purple rules 55 align with the nearest edge of the blue column rules. 56 57 In the bottom two grids, 'column-rule-lateral-inset-start/end' 58 is zero, respectively, to make the blue rule attach to the side 59 of the track that it used for its longitudinal sizing. 60 </pre> 61 62 <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><x>8</x></div> 63 <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><x>8</x></div><br> 64 <div class="grid all-start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> 65 <div class="grid all-end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> 66 67 <script> 68 window.onload = function() { 69 [...document.querySelectorAll('.grid')].forEach(function(elm) { 70 const cs = window.getComputedStyle(elm); 71 var inset = cs.columnRuleLateralInsetStart + " " + cs.columnRuleLateralInsetEnd; 72 inset = inset != "auto auto" ? ("\n" + "'column-rule-lateral-inset: " + inset) : ""; 73 elm.setAttribute("test", 74 "'column-rule-extent: " + cs.columnRuleExtent + inset 75 ); 76 }); 77 } 78 </script>