self-align-safe-unsafe-grid-002.html (4274B)
1 <!DOCTYPE html> 2 <title>Safe vs Unsafe justify-self in Grid Layout</title> 3 <link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/row-align"> 5 <link rel="match" href="self-align-safe-unsafe-grid-002-ref.html"> 6 <style> 7 /* Label things */ 8 body > div { 9 display: flow-root; 10 } 11 body > div::before { 12 display: block; 13 content: attr(class); 14 font-size: 10px; 15 margin-top: 10px; 16 } 17 18 /* Test Framework */ 19 .container { 20 border: solid aqua; 21 margin: 10px; 22 float: left; 23 width: 30px; 24 height: 30px; 25 display: grid; 26 grid: 100% / 100%; 27 } 28 29 .item { 30 background: orange; 31 height: 100%; 32 } 33 34 /* Test */ 35 .small .item { 36 width: 20px; 37 } 38 .large .item { 39 width: 40px; 40 } 41 42 .center { justify-self: center; } 43 .start { justify-self: start; } 44 .end { justify-self: end; } 45 .self-start { justify-self: self-start; } 46 .self-end { justify-self: self-end; } 47 .flex-start { justify-self: flex-start; } 48 .flex-end { justify-self: flex-end; } 49 50 .safe .center { justify-self: safe center; } 51 .safe .start { justify-self: safe start; } 52 .safe .end { justify-self: safe end; } 53 .safe .self-start { justify-self: safe self-start; } 54 .safe .self-end { justify-self: safe self-end; } 55 .safe .flex-start { justify-self: safe flex-start; } 56 .safe .flex-end { justify-self: safe flex-end; } 57 58 .safe .center { justify-self: safe center; } 59 .safe .start { justify-self: safe start; } 60 .safe .end { justify-self: safe end; } 61 .safe .self-start { justify-self: safe self-start; } 62 .safe .self-end { justify-self: safe self-end; } 63 .safe .flex-start { justify-self: safe flex-start; } 64 .safe .flex-end { justify-self: safe flex-end; } 65 </style> 66 67 <div class="default small"> 68 <div class="container"> 69 <div class="item normal"></div> 70 </div> 71 <div class="container"> 72 <div class="item center"></div> 73 </div> 74 <div class="container"> 75 <div class="item start"></div> 76 </div> 77 <div class="container"> 78 <div class="item end"></div> 79 </div> 80 <div class="container"> 81 <div class="item self-start"></div> 82 </div> 83 <div class="container"> 84 <div class="item self-end"></div> 85 </div> 86 <div class="container"> 87 <div class="item flex-start"></div> 88 </div> 89 <div class="container"> 90 <div class="item flex-end"></div> 91 </div> 92 </div> 93 94 <div class="default large"> 95 <div class="container"> 96 <div class="item normal"></div> 97 </div> 98 <div class="container"> 99 <div class="item center"></div> 100 </div> 101 <div class="container"> 102 <div class="item start"></div> 103 </div> 104 <div class="container"> 105 <div class="item end"></div> 106 </div> 107 <div class="container"> 108 <div class="item self-start"></div> 109 </div> 110 <div class="container"> 111 <div class="item self-end"></div> 112 </div> 113 <div class="container"> 114 <div class="item flex-start"></div> 115 </div> 116 <div class="container"> 117 <div class="item flex-end"></div> 118 </div> 119 </div> 120 121 <div class="unsafe large"> 122 <div class="container"> 123 <div class="item normal"></div> 124 </div> 125 <div class="container"> 126 <div class="item center"></div> 127 </div> 128 <div class="container"> 129 <div class="item start"></div> 130 </div> 131 <div class="container"> 132 <div class="item end"></div> 133 </div> 134 <div class="container"> 135 <div class="item self-start"></div> 136 </div> 137 <div class="container"> 138 <div class="item self-end"></div> 139 </div> 140 <div class="container"> 141 <div class="item flex-start"></div> 142 </div> 143 <div class="container"> 144 <div class="item flex-end"></div> 145 </div> 146 </div> 147 148 <div class="safe large"> 149 <div class="container"> 150 <div class="item normal"></div> 151 </div> 152 <div class="container"> 153 <div class="item center"></div> 154 </div> 155 <div class="container"> 156 <div class="item start"></div> 157 </div> 158 <div class="container"> 159 <div class="item end"></div> 160 </div> 161 <div class="container"> 162 <div class="item self-start"></div> 163 </div> 164 <div class="container"> 165 <div class="item self-end"></div> 166 </div> 167 <div class="container"> 168 <div class="item flex-start"></div> 169 </div> 170 <div class="container"> 171 <div class="item flex-end"></div> 172 </div> 173 </div>