grid-inline-axis-alignment-auto-margins-008.html (1199B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> 6 <link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html"> 7 <meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined."> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 #grid { 11 display: grid; 12 position: relative; 13 background: grey; 14 grid-template-columns: 40% 60%; 15 grid-template-rows: 100px; 16 height: 200px; 17 width: auto; 18 align-items: start; 19 } 20 #grid div { 21 margin: 0px auto 0px auto; 22 } 23 #item1 { 24 font: 20px/1 Ahem; 25 color: green; 26 } 27 #item2 { 28 font: 40px/1 Ahem; 29 color: blue; 30 } 31 </style> 32 <p>The test passes if it has the same visual effect as reference.</p> 33 <div id="grid"> 34 <div id="item1">XXX</div> 35 <div id="item2">XXXXX</div> 36 </div>