StyleKit
风格目录组件库
使用指南关于项目GitHub
风格目录/杂志网格布局

杂志网格布局

Magazine Grid

灵感来自印刷杂志的多栏网格布局,通过不同大小的内容块创造丰富的视觉层次,适合新闻、博客、内容聚合。

杂志多栏新闻博客内容网格
查看完整 Showcase →

配色方案

Primary

#1a1a1a

Secondary

#fafafa

Accent 1

#e63946

Accent 2

#2a9d8f

Accent 3

#e9c46a

Accent 4

#264653

Quick Start

3 步开始使用 AI 生成

1

复制 AI Rules

2

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

3

开始生成

尝试:"用 杂志网格布局 风格生成一个着陆页"

设计哲学

Magazine Grid(杂志网格布局)借鉴传统印刷杂志的排版智慧,通过多栏和混合尺寸内容块创造专业的编辑效果。

核心理念: - 视觉层级:大图抓眼球,小块填充细节 - 扫描友好:读者可快速浏览找到感兴趣的内容 - 空间节奏:大小交替创造阅读节奏 - 专业感:传递权威性和可信度

必须做 / Do's

  • +使用 CSS Grid 创建复杂网格 grid-template-areas
  • +特色内容使用更大的网格区域 col-span-2 row-span-2
  • +保持基线对齐和一致的间距
  • +使用不同大小的内容块创造层次
  • +移动端转为单列或简化网格
  • +添加清晰的分类标签和时间戳
  • +考虑广告位的预留空间

禁止做 / Don'ts

  • -禁止所有内容块大小相同
  • -禁止忽略移动端布局适配
  • -禁止内容过于拥挤无留白
  • -禁止分类标签不一致
  • -禁止忽略图片裁切比例

组件模板

组件预览

分类标签

文章分类的标签按钮

Technology
tsx
<span className="
  inline-block
  px-3 py-1
  text-xs font-semibold uppercase tracking-wider
  text-red-600
  bg-red-50
  rounded
">
  Technology
</span>

全局样式

Global CSS

css
/* Magazine Grid Global Styles */

/* Base magazine grid */
.magazine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .magazine-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Featured item spans */
.magazine-featured {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 767px) {
  .magazine-featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Article card styles */
.magazine-article {
  position: relative;
}

.magazine-article img {
  transition: transform 0.3s ease;
}

.magazine-article:hover img {
  transform: scale(1.05);
}

/* Category tags */
.magazine-category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
}

/* Category colors */
.magazine-category-tech { color: #3b82f6; background: #eff6ff; }
.magazine-category-business { color: #10b981; background: #ecfdf5; }
.magazine-category-culture { color: #f59e0b; background: #fffbeb; }
.magazine-category-opinion { color: #8b5cf6; background: #f5f3ff; }
.magazine-category-featured { color: white; background: #dc2626; }

/* Line clamp for excerpts */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt,快速开始用 AI 生成 杂志网格布局 风格的界面。

新闻首页

新闻网站的杂志风格首页

Create a news homepage with magazine grid:
1. 4-column grid on desktop, 2 on tablet, 1 on mobile
2. Featured story spanning 2x2 with image overlay
3. Regular articles in grid with thumbnail, category, title
4. Category tabs: All, Politics, Tech, Business, Sports
5. Breaking news banner at top
6. Load more button at bottom
7. Sidebar with trending stories (optional)
Clean, professional news design with red accent

博客列表

博客文章的杂志布局

Create a blog listing with magazine grid:
1. Featured post with large image and gradient overlay
2. Regular posts in varied sizes (some 2-col wide)
3. Each post: image, category tag, title, excerpt, author
4. Mix of horizontal and vertical card layouts
5. Filter by category dropdown
6. Infinite scroll loading
7. Reading time indicator
Modern editorial style with serif headlines

内容聚合页

多类型内容的聚合展示

Create a content hub with magazine grid:
1. Mix of content types: articles, videos, podcasts
2. Video cards with play button overlay
3. Podcast cards with audio duration
4. Featured content section at top
5. "Editor's Picks" sidebar section
6. Newsletter signup card in grid
7. Trending topics tags
Multi-format content with clear type indicators

提示:复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

杂志网格布局 是一种布局模式,可以与以下视觉风格搭配使用。

Featured

Editorial

优雅的杂志排版,衬线标题与留白之美

编辑杂志风

Editorial

Minimal
Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Corporate

专业企业风格

企业简洁风

Corporate Clean

Vintage
Retro

复古怀旧风格

复古怀旧风

Retro Vintage

Dark

深色界面设计

暗黑模式

Dark Mode

Style Pack

导出风格包

获取完整的可机器读取风格资源,包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设,可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量,适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中,让它按照 杂志网格布局 风格生成代码。

You are a frontend expert specializing in Magazine Grid layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all content blocks same size
- Do NOT ignore mobile responsive layout
- Do NOT overcrowd content without whitespace
- Do NOT use inconsistent category styling
- Do NOT ignore image aspect ratios

## Must Follow

- Use CSS Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-4
- Featured content: col-span-2 row-span-2
- Consistent gaps: gap-6
- Category labels on all articles
- Image hover effects
- Line clamping for excerpts

## Grid Structure

Desktop (4 columns):
- Featured: 2x2 grid area
- Regular: 1x1 grid cells
- Mix large and small for variety

Tablet (2 columns):
- Featured: 2x1 or 1x2
- Regular: 1x1

Mobile (1 column):
- All items full width
- Stack vertically

## Article Card

Required elements:
1. Image with aspect ratio
2. Category label (colored)
3. Title (clamped)
4. Excerpt (optional, clamped)
5. Meta (author, date, read time)

## Category Colors

Use distinct colors per category:
- Tech: blue
- Business: green
- Culture: amber
- Opinion: purple
- Featured: red

## Self-Check

After generating code, verify:
1. Featured item is larger
2. Grid has visual variety
3. Categories are labeled
4. Mobile layout works
5. Images have proper ratios

StyleKit

精选 Web 设计风格集合,让 AI 生成的网站更加美观。

导航

风格目录关于项目

资源

GitHub 仓库提交风格

© 2025 StyleKit. 开源项目。

用杂志排版风格构建