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