grid-subgrid-001.html (1501B)
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 subgrid rules.</title> 7 <style> 8 .grid { 9 position: relative; 10 display: inline-grid; 11 grid-template-columns: 30px 50px 70px; 12 inline-size: 200px; 13 gap: 8px; 14 place-content: center; 15 border: 2px solid; 16 17 column-rule: auto solid; 18 column-rule-image: linear-gradient(#f008,#fc08); 19 column-rule-extent: all-long allow-overlap; 20 row-rule: 6px solid purple; 21 row-rule-extent: all-long; 22 } 23 24 .subgrid { 25 display: grid; 26 grid: subgrid / subgrid; 27 grid-column: 1 / span 2; 28 grid-row: 2 / span 2; 29 border: 1px dashed; 30 margin: 6px; 31 32 column-rule: 2px solid red; 33 row-rule: solid blue; 34 row-rule-align: rule; 35 row-rule-edge-align: gap-over; 36 } 37 38 .subgrid.larger { 39 gap: 16px; 40 row-rule-lateral-inset-start: 1px; 41 } 42 43 .subgrid.smaller { 44 gap: 4px; 45 row-rule-width: 100%; 46 } 47 48 x { 49 background: grey; 50 opacity: 0.5; 51 } 52 53 .grid::after { 54 position: absolute; 55 bottom: -3em; 56 font-size: 10px; 57 font-style: italic; 58 vertical-align: top; 59 content: attr(test); 60 } 61 </style> 62 63 <div class="grid" test="A subgrid with a larger gap than the parent."> 64 <x>1</x><x>2</x><x>3</x> 65 <div class="subgrid larger"><x>4</x><x>5</x><x>6</x></div> 66 <x>7</x><x>8</x> 67 </div> 68 69 <div class="grid" test="A subgrid with a smaller gap than the parent."> 70 <x>1</x><x>2</x><x>3</x> 71 <div class="subgrid smaller"><x>4</x><x>5</x><x>6</x></div> 72 <x>7</x><x>8</x> 73 </div>