grid-segment-001.html (711B)
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</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) / auto 20px 40px; 15 gap: 10px 16px; 16 17 column-rule: solid blue; 18 column-rule-extent: segment; 19 row-rule: solid purple; 20 row-rule-extent: segment; 21 22 border: 2px solid; 23 margin-right: 15px; 24 margin-bottom: 30px; 25 background: lightgrey; 26 } 27 28 x { 29 grid-column: 1; 30 background: grey; 31 } 32 33 </style> 34 35 <div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x></div>