subgrid-button.html (778B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1887867"> 5 <link rel="match" href="subgrid-button-ref.html"> 6 <title>Button subgrid</title> 7 <style> 8 .grid { 9 display: grid; 10 width: 400px; 11 grid-template-columns: auto auto 1fr; 12 background-color: #ccc; 13 } 14 .button { 15 display: grid; 16 grid-template-columns: subgrid; 17 grid-column: span 3; 18 text-align: initial; 19 20 background: transparent; 21 padding: 5px 10px; 22 margin: 0; 23 border: 2px solid; 24 font: inherit; 25 } 26 .right { 27 text-align: right; 28 } 29 </style> 30 <div class="grid"> 31 <button class="button"> 32 <span>hello</span> 33 <span>,</span> 34 <span class="right">world</span> 35 </button> 36 </div>