Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Masonry: remove built-in column number condition

Browse source
This commit is contained in:
thislight 2024-11-23 13:53:10 +08:00
parent fbbac36b4a
commit bb3ba32dc5
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
3 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/platform/Masonry.css
View file

@ -5,12 +5,7 @@
@supports (grid-template-rows: masonry) { @supports (grid-template-rows: masonry) {
.NativeMasonry { .NativeMasonry {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, min-content)); grid-template-columns: repeat(auto-fit, minmax(33%, min-content));
grid-template-rows: masonry; grid-template-rows: masonry;
&:has(> :last-child:nth-child(2n)) {
grid-template-columns: repeat(2, minmax(auto, min-content));
} }
} }
}

7
src/platform/Masonry.tsx
View file

@ -144,6 +144,13 @@ function MasonryNative<T extends MasonryContainer>(
* and fallback to masonry-layout if not supported. The children * and fallback to masonry-layout if not supported. The children
* must have specified width and height. * must have specified width and height.
* *
* Testing native behaviour:
* - Firefox: in `about:config`, search for `layout.css.grid-template-masonry-value.enabled`
*
* Class `NativeMasonry` will be added to the element if it's under the
* css masonry layout, otherwise it's `CompatMasonry`. `Masonry` is always
* added.
*
* **Children Changes** As the children changed, reflow will be triggered, * **Children Changes** As the children changed, reflow will be triggered,
* and there is might be a blink (or transition) for user. If it's not your * and there is might be a blink (or transition) for user. If it's not your
* intention, don't remove/add the direct children. Instead wraps them under * intention, don't remove/add the direct children. Instead wraps them under