grid-segment-002.html (857B)
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 'column-rule-extent: segment' on a grid container with collapsed tracks</title> 7 <style> 8 html,body { 9 color:black; background-color:white; font:20px/1 monospace; 10 } 11 12 .grid { 13 display: inline-grid; 14 grid: repeat(3, 30px) / repeat(auto-fit, minmax(0,1fr) 100px minmax(0,1fr)); 15 width: 300px; 16 gap: 10px 16px; 17 18 column-rule: solid blue; 19 column-rule-extent: segment; 20 row-rule: solid purple; 21 row-rule-extent: segment; 22 23 border: 2px solid; 24 margin-right: 15px; 25 margin-bottom: 30px; 26 background: lightgrey; 27 } 28 29 x { 30 grid-column: 1; 31 place-self: start; 32 background: grey; 33 } 34 x:nth-child(4) { grid-column: 3; } 35 36 </style> 37 38 <div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x><x>column 3</x></div>