grid-repeat-auto-fill-fit-013.html (3530B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title> 9 <link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> 11 <link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html"> 12 <style type="text/css"> 13 body { 14 margin: 10px; 15 font-size: 10px; 16 } 17 .wrapper { 18 display: grid; 19 width: 600px; 20 background-color: #f00; 21 grid-auto-columns: 10px; 22 grid-auto-flow: row; 23 } 24 .wrapper > * { 25 background-color: #444; 26 color: #fff; 27 } 28 29 .relative { 30 position: relative; 31 } 32 33 .absposchild { 34 z-index: -1; 35 position: absolute; 36 grid-column-end: span 1; 37 top: 0px; 38 bottom: 0px; 39 left: 0px; 40 right: 0px; 41 } 42 43 .templateFit { 44 grid-template-columns: repeat(auto-fit, 40px); 45 } 46 .templateFixedFit { 47 grid-template-columns: 20px repeat(auto-fit, 40px); 48 } 49 .templateFitFixed { 50 grid-template-columns: repeat(auto-fit, 40px) 40px; 51 } 52 .templateFixedFitFixed { 53 grid-template-columns: 20px repeat(auto-fit, 40px) 40px; 54 } 55 56 z { 57 grid-column: -18; 58 } 59 z::after { 60 content: "Z"; 61 } 62 63 y { 64 grid-column: auto; 65 } 66 y::after { 67 content: "Y"; 68 } 69 70 71 b { 72 grid-column: 3; 73 } 74 b::after { 75 content: "B"; 76 } 77 78 c { 79 grid-column: 5; 80 } 81 c::after { 82 content: "C"; 83 } 84 85 d { 86 grid-column: 7; 87 } 88 d::after { 89 content: "D"; 90 } 91 92 e { 93 grid-column: 9; 94 } 95 e::after { 96 content: "E"; 97 } 98 99 f { 100 grid-column: 11; 101 } 102 f::after { 103 content: "F"; 104 } 105 106 </style> 107 </head> 108 <body> 109 110 <div class="wrapper templateFit"><z></z><b></b><y></y></div> 111 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div> 112 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> 113 <div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> 114 <div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> 115 116 <div class="wrapper templateFixedFit"><z></z><b></b><y></y></div> 117 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div> 118 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> 119 <div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> 120 <div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> 121 122 <div class="wrapper templateFitFixed"><z></z><b></b><y></y></div> 123 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div> 124 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> 125 <div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> 126 <div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> 127 128 <div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div> 129 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div> 130 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> 131 <div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> 132 <div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> 133 134 </body> 135 </html>