MilkyShots/MilkyShots
4
0
Fork 0
Code Issues 49 Pull Requests 1 Packages Projects Releases Wiki Activity

fix: use flexbox with align-items:flex-start for album detail grid

Browse Source 
- CSS Grid forces uniform row heights, cropped landscape images next to portraits
- Flexbox with align-items:flex-start preserves each tile's own aspect-ratio height
- align-content:flex-start ensures container height grows for scrolling
This commit is contained in:
Samuele Lorefice
2026-07-08 13:58:37 +02:00
parent b7d1912fc6
commit d45a915ba9
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
MilkStream.Client/Components/Pages/AlbumDetail.razor.css
View File

@@ -16,13 +16,16 @@
}
.album-assets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
gap: 8px;
padding: 0 8px;
}
.masonry-tile {
flex: 0 0 calc(25% - 6px);
overflow: hidden;
border-radius: 4px;
cursor: pointer;
@@ -54,14 +57,14 @@
}
@media (max-width: 576px) {
.album-assets-grid { grid-template-columns: repeat(2, 1fr); }
.masonry-tile { flex: 0 0 calc(50% - 4px); }
}
@media (min-width: 577px) and (max-width: 992px) {
.album-assets-grid { grid-template-columns: repeat(3, 1fr); }
.masonry-tile { flex: 0 0 calc(33.33% - 5.33px); }
}
@media (min-width: 993px) and (max-width: 1400px) {
.album-assets-grid { grid-template-columns: repeat(4, 1fr); }
.masonry-tile { flex: 0 0 calc(25% - 6px); }
}
@media (min-width: 1401px) {
.album-assets-grid { grid-template-columns: repeat(5, 1fr); }
.masonry-tile { flex: 0 0 calc(20% - 6.4px); }
}