grid-inline-axis-alignment-auto-margins-008-ref.html (824B)
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: 40% 60%; 12 grid-template-rows: 100px; 13 height: 200px; 14 width: auto; 15 justify-items: center; 16 align-items: start; 17 } 18 #item1 { 19 font: 20px/1 Ahem; 20 color: green; 21 } 22 #item2 { 23 font: 40px/1 Ahem; 24 color: blue; 25 } 26 </style> 27 <p>The test passes if it has the same visual effect as reference.</p> 28 <div id="grid"> 29 <div id="item1">XXX</div> 30 <div id="item2">XXXXX</div> 31 </div>