grid-lanes-intrinsic-sizing-cols-007.html (1057B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Grid Lanes layout column sizing - intrinsic</title> 9 <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> 11 <link rel="match" href="grid-lanes-intrinsic-sizing-cols-007-ref.html"> 12 <style> 13 14 @import "support/grid-lanes-intrinsic-sizing-visual.css"; 15 16 grid { 17 display: inline-grid-lanes; 18 gap: 1px 2px; 19 border: 1px solid; 20 padding: 0 1px 0 2px; 21 vertical-align: top; 22 } 23 24 .mix grid { 25 grid-template-columns: 1ch auto; 26 } 27 28 .mix2 grid { 29 grid-template-columns: 1ch auto 1ch; 30 } 31 </style> 32 33 <body> 34 35 <section class="mix"> 36 <grid title="Auto Last Track"> 37 <item style="width:5ch; grid-column: span 2;">1</item> 38 </grid> 39 </section> 40 41 <section class="mix2"> 42 <grid title="Auto Middle Track"> 43 <item style="width:5ch; grid-column: span 3;">1</item> 44 </grid> 45 </section>