恢复精选瀑布流布局

将创作主页精选列表从网格恢复为多栏瀑布流

新增样式契约测试防止瀑布流再次退化为网格

src/index.css

@@ -3801,20 +3801,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .creation-landing__asset-waterfall {
-  display: grid;
   width: 100%;
   min-width: 0;
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  gap: 0.92rem;
-  align-items: start;
+  column-count: 3;
+  column-gap: 0.92rem;
 }
 
 .creation-landing__asset-card {
   position: relative;
-  display: block;
+  display: inline-block;
   width: 100%;
   min-width: 0;
   overflow: hidden;
+  margin: 0 0 0.92rem;
+  break-inside: avoid;
   border: 1px solid rgba(220, 189, 163, 0.78);
   border-radius: 1rem;
   background: rgba(255, 254, 251, 0.88);
@@ -4314,7 +4314,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   }
 
   .creation-landing__asset-waterfall {
-    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    column-count: 2;
   }
 
   .creation-landing__showcase-modal-panel {
@@ -4374,7 +4374,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   }
 
   .creation-landing__asset-waterfall {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 
   .creation-landing__showcase-modal-overlay {

src/index.test.ts

@@ -31,6 +31,40 @@ function getCssBlock(source: string, selector: string) {
 }
 
 describe('index stylesheet unread dots', () => {
+  it('keeps creation home featured assets in a column waterfall layout', () => {
+    const css = readIndexCss();
+    const waterfallBlock = getCssBlock(
+      css,
+      '.creation-landing__asset-waterfall',
+    );
+    const cardBlock = getCssBlock(css, '.creation-landing__asset-card {');
+    const tabletQueryIndex = css.indexOf('@media (max-width: 900px)');
+    const mobileQueryIndex = css.indexOf('@media (max-width: 560px)');
+
+    expect(tabletQueryIndex).toBeGreaterThanOrEqual(0);
+    expect(mobileQueryIndex).toBeGreaterThanOrEqual(0);
+    const tabletWaterfallBlock = getCssBlock(
+      css.slice(tabletQueryIndex),
+      '.creation-landing__asset-waterfall',
+    );
+    const mobileWaterfallBlock = getCssBlock(
+      css.slice(mobileQueryIndex),
+      '.creation-landing__asset-waterfall',
+    );
+
+    expect(waterfallBlock).toContain('column-count: 3;');
+    expect(waterfallBlock).toContain('column-gap: 0.92rem;');
+    expect(waterfallBlock).not.toContain('display: grid;');
+    expect(waterfallBlock).not.toContain('grid-template-columns');
+    expect(cardBlock).toContain('display: inline-block;');
+    expect(cardBlock).toContain('margin: 0 0 0.92rem;');
+    expect(cardBlock).toContain('break-inside: avoid;');
+    expect(tabletWaterfallBlock).toContain('column-count: 2;');
+    expect(tabletWaterfallBlock).not.toContain('grid-template-columns');
+    expect(mobileWaterfallBlock).toContain('column-count: 1;');
+    expect(mobileWaterfallBlock).not.toContain('grid-template-columns');
+  });
+
   it('keeps icon generator decoration from overriding the shared generating animation', () => {
     const css = readIndexCss();
     const generatingBlock = getCssBlock(