mirzaev/gallery.mjs
mirzaev
/
gallery.mjs
1
0
Fork 0
Code Pull Requests Activity

updated column width calculation

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2025-07-01 22:14:11 +07:00
parent d08aca2bce
commit efb33bdf59
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.css
View File

@ -7,17 +7,23 @@
@layer system { @layer system {
section#wrap { section#wrap {
--wrap-padding: 1rem; --wrap-padding: 1rem;
--image-diameter: 120px;
--gap: 1rem; --gap: 1rem;
--columns: 4; --columns: 4;
--image-diameter: unset;
--image-width: var(
--image-diameter,
calc(
100% / var(--columns, 4) - var(--gap, 1rem) * (var(--columns, 4) - 1) /
var(--columns, 4)
)
);
--image-height: var(--image-diameter, 120px);
position: relative; position: relative;
min-width: 300px; min-width: 300px;
width: calc( width: 100%;
var(--image-diameter, 120px) * var(--columns, 4) + var(--gap, 1rem) *
(var(--columns, 4) - 1)
);
height: min-content; height: min-content;
padding: var(--wrap-padding, 1rem); padding: var(--wrap-padding, 1rem);
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
@ -108,8 +114,8 @@
> div.image { > div.image {
position: relative; position: relative;
width: var(--image-diameter, 120px); width: var(--image-width, 120px);
height: var(--image-diameter, 120px); height: var(--image-height, 120px);
cursor: grab; cursor: grab;
overflow: hidden; overflow: hidden;
border-radius: 0.75rem; border-radius: 0.75rem;
@ -262,4 +268,8 @@
background: unset; background: unset;
border: unset; border: unset;
} }
section#wrap {
width: 60vw;
}
} }