Hugging Face's logo

Spaces:
duqing2026
/
static-demo
Running

App Files Community
1
duqing2026 commited on
Commit
d419a4f
·
1 Parent(s): 56fc63d

grif 简易实现，repeat(4, 1fr)

Browse files
Files changed (1) hide show
  1. masonry-demo.html +41 -39
masonry-demo.html CHANGED
@@ -109,34 +109,13 @@
109
  margin: 0 0 16px;
110
  }
111
 
112
- .grid-wrap .cards {
113
- display: grid;
114
- grid-template-columns: repeat(4, 1fr);
115
- gap: 16px;
116
- }
117
- @media (max-width: 980px) {
118
- .grid-wrap .cards { grid-template-columns: repeat(3, 1fr); }
119
- }
120
- @media (max-width: 720px) {
121
- .grid-wrap .cards { grid-template-columns: repeat(2, 1fr); }
122
- }
123
- @media (max-width: 520px) {
124
- .grid-wrap .cards { grid-template-columns: 1fr; }
125
- }
126
- .grid-wrap .card {
127
- width: auto;
128
- }
129
- @supports (grid-template-rows: masonry) {
130
- .grid-wrap .cards {
131
- grid-template-rows: masonry;
132
- }
133
- }
134
  </style>
135
  </head>
136
  <body>
137
  <main class="stage">
138
  <h1 class="title">CSS 瀑布流 Demo</h1>
139
- <p class="sub">上半部分为 columns 方案（兼容性最佳），下半部分为原生 CSS Masonry（浏览器实验支持）。</p>
140
 
141
  <h2 class="section-title">columns 瀑布流（兼容性好）</h2>
142
  <p class="legend">使用 column-count + break-inside: avoid 构建，绝大多数现代浏览器可用。</p>
@@ -157,25 +136,48 @@
157
  </div>
158
  </section>
159
 
160
- <h2 class="section-title">原生 CSS Masonry（实验性）</h2>
161
- <p class="legend">在支持的浏览器中，Grid 的行设置为 masonry，将自动填补空隙。</p>
162
- <section class="grid-wrap">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  <div class="cards">
164
- <div class="card h-220"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
165
- <div class="card h-140"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
166
- <div class="card h-320"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
167
- <div class="card h-180"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
168
- <div class="card h-260"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
169
- <div class="card h-220"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
170
- <div class="card h-140"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
171
- <div class="card h-320"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
172
- <div class="card h-260"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
173
- <div class="card h-180"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
174
- <div class="card h-220"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
175
- <div class="card h-140"><h3 class="title"><span class="num"></span>示例卡片</h3><div class="content">可变高度内容</div></div>
176
  </div>
177
  </section>
178
  </main>
179
  </body>
180
  </html>
181
-
 
109
  margin: 0 0 16px;
110
  }
111
 
112
+ /* 原生 Masonry区块已移除 */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  </style>
114
  </head>
115
  <body>
116
  <main class="stage">
117
  <h1 class="title">CSS 瀑布流 Demo</h1>
118
+ <p class="sub">提供两种纯 CSS 瀑布流方案：columns 与简易 Grid。</p>
119
 
120
  <h2 class="section-title">columns 瀑布流（兼容性好）</h2>
121
  <p class="legend">使用 column-count + break-inside: avoid 构建，绝大多数现代浏览器可用。</p>
 
136
  </div>
137
  </section>
138
 
139
+ <!-- 原生 Masonry区块已删除，保留 columns 与简易 Grid -->
140
+
141
+ <h2 class="section-title">简易 Grid 瀑布流</h2>
142
+ <p class="legend">纯 CSS Grid 切片：grid-auto-rows + grid-auto-flow: dense + 行跨度。</p>
143
+ <section class="grid-simple">
144
+ <style>
145
+ .grid-simple .cards {
146
+ display: grid;
147
+ grid-template-columns: repeat(4, 1fr);
148
+ grid-auto-rows: 10px;
149
+ gap: 10px;
150
+ grid-auto-flow: dense;
151
+ }
152
+ @media (max-width: 980px) {
153
+ .grid-simple .cards { grid-template-columns: repeat(3, 1fr); }
154
+ }
155
+ @media (max-width: 720px) {
156
+ .grid-simple .cards { grid-template-columns: repeat(2, 1fr); }
157
+ }
158
+ @media (max-width: 520px) {
159
+ .grid-simple .cards { grid-template-columns: 1fr; }
160
+ }
161
+ .grid-simple .card { width: auto; }
162
+ .grid-simple .h-140 { grid-row: span 8; }
163
+ .grid-simple .h-180 { grid-row: span 10; }
164
+ .grid-simple .h-220 { grid-row: span 12; }
165
+ .grid-simple .h-260 { grid-row: span 14; }
166
+ .grid-simple .h-320 { grid-row: span 17; }
167
+ </style>
168
  <div class="cards">
169
+ <div class="card h-180"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
170
+ <div class="card h-260"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
171
+ <div class="card h-140"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
172
+ <div class="card h-320"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
173
+ <div class="card h-220"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
174
+ <div class="card h-180"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
175
+ <div class="card h-260"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
176
+ <div class="card h-220"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
177
+ <div class="card h-140"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
178
+ <div class="card h-320"><h3 class="title"><span class="num"></span>卡片</h3><div class="content">Grid 切片示例</div></div>
 
 
179
  </div>
180
  </section>
181
  </main>
182
  </body>
183
  </html>