八图布局

4行4列 · 不规则网格 · CSS Grid 布局

× px

布局预览

第1列-图1
(1列×2行)
左侧大图
第1列-图2
(1列×2行)
左侧大图
第2列-图1
(1列×2行)
中部大图
第2列-图2
(1列×2行)
中部大图
第3-4列-图1
(2列×1行)
横向大图
第3-4列-图2
(2列×1行)
横向大图
第3-4列-图3
(2列×1行)
横向大图
第3-4列-图4
(2列×1行)
横向大图

布局说明

网格规格

采用 4×4 网格系统，共16个单元格，通过跨行跨列实现不规则布局效果

布局分配

第1列图1-2： 各占1列×2行
第2列图1-2： 各占1列×2行
第2列图1-2： 各占1列×2行
第3-4列图1-4： 各占2列×1行

布局特点

左侧强调：左侧2列各占2行，适合展示重点内容
右侧整齐：右侧4列横向排列，适合展示系列内容
空间利用：不规则网格充分利用空间
适用场景：产品展示、数据可视化、图库展示

空间占比

左侧竖图： 4个（各占25%宽度×50%高度）
右侧横图： 4个（各占50%宽度×25%高度）

技术实现

• 使用 CSS Grid 布局系统，4×4 网格划分

• 通过 grid-column 和 grid-row 属性实现跨行跨列效果

• 左侧元素使用 1/3 宽度、右侧元素使用 2/3 宽度

• 渐变背景配合阴影效果增强视觉层次

• 支持交互式尺寸调整，可自定义输出尺寸