Masonry: remove built-in column number condition

src/platform/Masonry.css

@@ -5,12 +5,7 @@
 @supports (grid-template-rows: masonry) {
   .NativeMasonry {
     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;
-
-    &:has(> :last-child:nth-child(2n)) {
-      grid-template-columns: repeat(2, minmax(auto, min-content));
-    }
   }
 }
-

src/platform/Masonry.tsx

@@ -144,6 +144,13 @@ function MasonryNative<T extends MasonryContainer>(
  * and fallback to masonry-layout if not supported. The children
  * 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,
  * 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

src/timelines/toots/MediaAttachmentGrid.css

@@ -6,7 +6,7 @@
   contain: layout style;
   gap: 4px;
 
-  > * {
+  >* {
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
@@ -26,16 +26,16 @@
     }
   }
 
-  > * > * {
+  >*>* {
     width: 100%;
     height: 100%;
   }
 
-  > * > :where(img, video) {
+  >*> :where(img, video) {
     object-fit: contain;
   }
 
-  > * >.sensitive-placeholder {
+  >*>.sensitive-placeholder {
     display: inline-flex;
     display: inline flex;
     align-items: center;