auto-margins-ignored-during-track-sizing-001.html (1430B)
1 <!DOCTYPE html> 2 <title>CSS Grid: grid items using 'auto' margins.</title> 3 <link rel="author" title="Javier Fernendez" href="mailto:jfernandez@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> 6 <link rel="match" href="references/auto-margins-ignored-during-track-sizing-001-ref.html"> 7 <meta name="assert" content="This test ensures that 'auto' margin is treated as 0px during the tracks sizing algorithm."/> 8 <style> 9 body { overflow: hidden; } 10 .grid { 11 display: grid; 12 grid-template-columns: 1fr 1fr 1fr; 13 } 14 .margin-center { 15 margin-top: 10px; 16 margin-left: auto; 17 margin-right: auto; 18 } 19 .i1 { background: magenta; } 20 .i2 { background: cyan; } 21 .i3 { background: yellow; } 22 .i4 { background: lime; } 23 </style> 24 <p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p> 25 <div class="grid"> 26 <div class="i1"> 27 In a few questions, you will get an expert-designed investment portfolio to fit your financial needs. 28 </div> 29 <div class="i2"> 30 Open and fund your account with 10,000 or more and we will put your money to work. 31 </div> 32 <div class="i3"> 33 We will take it from here, monitoring your portfolio daily to help keep it on track. 34 </div> 35 <div class="i4 margin-center">Learn More</a> 36 </div>