grid-gutters-014.html (1604B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> 5 <link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps"> 6 <link rel="match" href="grid-gutters-014-ref.html"> 7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 8 <meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout."> 9 10 <style> 11 #grid { 12 display: grid; 13 border: solid 5px teal; 14 padding: 5px; 15 grid-gap: 15% 10%; 16 gap: 15% 10%; 17 float: left; 18 grid: auto auto / auto auto; 19 /* content box width = 200px height = 100px -> gap x = 20px y = 15px */ 20 position: relative; 21 } 22 23 #grid > div { 24 margin: 5px 10px; 25 border: solid 5px aqua; 26 width: 70px; 27 height: 30px; 28 /* margin box height = 50px width = 100px */ 29 } 30 31 /* highlight manual pass condition */ 32 #grid > div:nth-child(even) { 33 border-right-color: red; 34 } 35 #grid > div:nth-child(n + 3) { 36 border-bottom-color: red; 37 } 38 #mask { 39 position: absolute; 40 border: 5px teal; 41 border-style: none solid solid none; 42 bottom: -5px; right: -5px; 43 top: 10px; left: 15px; 44 } 45 </style> 46 47 <p>Test passes if there is no red. 48 <div id="grid"> 49 <div></div> 50 <div></div> 51 <div></div> 52 <div></div> 53 <span id="mask"></span> 54 </div>