improve grid layout on mobile
Hunter
Wednesday, October 22nd, 2025 at 11:42 AM
150 line-height: 0;
151 position: relative; /* Image containers are positioned relative to grid */
152 /* Grid is centered within .page by the parent's flexbox */
153 + /* Bottom and right borders for the entire grid */
154 + border-bottom: 1px dashed var(--grid-line);
155 + border-right: 1px dashed var(--grid-line);
156 + box-sizing: border-box;
157 }
158
159 .grid-cell {
160 width: 100%;
161 height: 100%;
162 box-sizing: border-box;
- border-right: 1px dashed var(--grid-line);
- border-bottom: 1px dashed var(--grid-line);
163 + border-top: 1px dashed var(--grid-line);
164 + border-left: 1px dashed var(--grid-line);
165 margin: 0;
166 padding: 0;
167 display: block;
168 }
169
-.grid-cell:nth-child(-n+50) {
- border-top: 1px dashed var(--grid-line);
-}
170 +@media (max-width: 680px) {
171 + .grid {
172 + border-bottom-style: solid;
173 + border-right-style: solid;
174 + border-bottom-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
175 + border-right-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
176 + }
177
-.grid-cell:nth-child(50n+1) {
- border-left: 1px dashed var(--grid-line);
178 + .grid-cell {
179 + border-top-style: solid;
180 + border-left-style: solid;
181 + border-top-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
182 + border-left-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
183 + }
184 }
185
186 .image-container {
370 grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
371 grid-template-rows: repeat(var(--grid-rows), 1fr) !important;
372 position: relative !important;
373 + border-bottom: 1px dashed var(--default-grid) !important;
374 + border-right: 1px dashed var(--default-grid) !important;
375 + box-sizing: border-box !important;
376 }
377
378 .grid-cell {
- border-right: 1px dashed var(--default-grid) !important;
- border-bottom: 1px dashed var(--default-grid) !important;
379 + border-top: 1px dashed var(--default-grid) !important;
380 + border-left: 1px dashed var(--default-grid) !important;
381 box-sizing: border-box !important;
382 width: 100% !important;
383 height: 100% !important;
385 padding: 0 !important;
386 }
387
- .grid-cell:nth-child(-n+50) {
- border-top: 1px dashed var(--default-grid) !important;
- }
-
- .grid-cell:nth-child(50n+1) {
- border-left: 1px dashed var(--default-grid) !important;
- }
-
388 .image-container {
389 outline: none !important;
390 position: absolute !important;