grid-gutters-014-ref.html (785B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title> 4 <style> 5 #grid { 6 border: solid 5px teal; 7 width: 200px; 8 height: 100px; 9 padding: 10px 0 0 10px; 10 } 11 12 #grid > div { 13 float: left; 14 border: solid 5px aqua; 15 width: 70px; 16 height: 30px; 17 margin-left: 5px; 18 } 19 20 /* highlight manual pass condition */ 21 #grid > div:nth-child(even) { 22 border-right: none; 23 margin-left: 40px; 24 } 25 #grid > div:nth-child(n + 3) { 26 border-bottom: none; 27 margin-top: 25px; 28 } 29 </style> 30 31 <p>Test passes if there is no red. 32 33 <div id="grid"> 34 <div></div> 35 <div></div> 36 <div></div> 37 <div></div> 38 </div>