grid-block-axis-alignment-auto-margins-008-ref.html (795B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 #grid { 8 display: grid; 9 position: relative; 10 background: grey; 11 grid-template-columns: 100px; 12 grid-template-rows: 40% 60%; 13 height: 50vh; 14 width: auto; 15 align-items: center; 16 } 17 #item1 { 18 font: 20px/1 Ahem; 19 color: green; 20 } 21 #item2 { 22 font: 40px/1 Ahem; 23 color: blue; 24 } 25 </style> 26 <p>The test passes if it has the same visual effect as reference.</p> 27 <div id="grid"> 28 <div id="item1">XXX</div> 29 <div id="item2">XXXXX</div> 30 </div>