grid-container-overflow-001.html (3050B)
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: overflow:hidden/auto</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> 11 <link rel="match" href="grid-container-overflow-001-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 grid-auto-rows: 5px; 20 grid-template-columns: repeat(3, 8px); 21 border: 1px solid black; 22 grid-row-gap: 4px; 23 grid-column-gap: 2px; 24 float: left; 25 overflow: hidden; 26 } 27 28 .grid :first-child { background:lime; } 29 .grid :nth-child(2n) { border-left:1px solid black; } 30 31 x { background: grey; width:7px; height:5px; } 32 y { background: blue; width:7px; height:5px; } 33 z { background: green; width:7px; height:5px; } 34 35 </style> 36 </head> 37 <body> 38 39 <div class="grid"> 40 <x></x><x></x><x></x> 41 <y></y><y></y><y></y> 42 <z></z><z></z><z></z> 43 </div> 44 45 <div class="grid" style="width:40px; justify-content:center; align-content:center;"> 46 <x></x><x></x><x></x> 47 <y></y><y></y><y></y> 48 <z></z><z></z><z></z> 49 </div> 50 51 <div class="grid" style="width:40px; justify-content:start; align-content:end;"> 52 <x></x><x></x><x></x> 53 <y></y><y></y><y></y> 54 <z></z><z></z><z></z> 55 </div> 56 57 <div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;"> 58 <x></x><x></x><x></x> 59 <y></y><y></y><y></y> 60 <z></z><z></z><z></z> 61 </div> 62 63 <div class="grid" style="height:40px; justify-content:start; align-content:end;"> 64 <x></x><x></x><x></x> 65 <y></y><y></y><y></y> 66 <z></z><z></z><z></z> 67 </div> 68 69 <div class="grid" style="width:8px;"> 70 <x></x><x></x><x></x> 71 <y></y><y></y><y></y> 72 <z></z><z></z><z></z> 73 </div> 74 75 <div class="grid" style="height:8px;"> 76 <x></x><x></x><x></x> 77 <y></y><y></y><y></y> 78 <z></z><z></z><z></z> 79 </div> 80 81 <div class="grid" style="width:8px; height:8px;"> 82 <x></x><x></x><x></x> 83 <y></y><y></y><y></y> 84 <z></z><z></z><z></z> 85 </div> 86 87 <div class="grid" style="width:8px; height:8px; justify-content:center;"> 88 <x></x><x></x><x></x> 89 <y></y><y></y><y></y> 90 <z></z><z></z><z></z> 91 </div> 92 93 <div class="grid" style="width:8px; height:8px; align-content:center;"> 94 <x></x><x></x><x></x> 95 <y></y><y></y><y></y> 96 <z></z><z></z><z></z> 97 </div> 98 99 <div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end; "> 100 <x></x><x></x><x></x> 101 <y></y><y></y><y></y> 102 <z></z><z></z><z></z> 103 </div> 104 105 <div class="grid" style="grid-auto-rows: 10px;; align-items:end;"> 106 <x></x><x></x><x></x> 107 <y></y><y></y><y></y> 108 <z></z><z></z><z></z> 109 </div> 110 111 <div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);"> 112 <x></x><x></x><x></x> 113 <y></y><y></y><y></y> 114 <z></z><z></z><z></z> 115 </div> 116 117 <div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; "> 118 <x></x><x></x><x></x> 119 <y></y><y></y><y></y> 120 <z></z><z></z><z></z> 121 </div> 122 123 </body> 124 </html>