grid-block-axis-alignment-auto-margins-008.html (1167B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</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-block-axis-alignment-auto-margins-008-ref.html"> 7 <meta name="assert" content="The 'top' and 'bottom' 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: auto; 15 grid-template-rows: 40% 60%; 16 height: 50vh; 17 width: auto; 18 } 19 #grid div { 20 margin: auto 0px auto 0px; 21 } 22 #item1 { 23 font: 20px/1 Ahem; 24 color: green; 25 } 26 #item2 { 27 font: 40px/1 Ahem; 28 color: blue; 29 } 30 </style> 31 <p>The test passes if it has the same visual effect as reference.</p> 32 <div id="grid"> 33 <div id="item1">XXX</div> 34 <div id="item2">XXXXX</div> 35 </div>