四图一中混合布局

上下左右环绕中心 · CSS Grid 布局

输出尺寸

× px

布局预览

上图 (2:1)

横向大图

右图 (1:2)

纵向图片

左图 (1:2)

纵向图片

中心 (1:1)

正方形焦点

下图 (2:1)

横向大图

布局说明

网格规格

采用 3×3 网格系统，共9个单元格，通过网格区域划分实现特殊布局效果

布局分配

上图： 2:1 横向布局，占据第1行前2列

下图： 2:1 横向布局，占据第3行后2列

左图： 1:2 纵向布局，占据第1列后2行

右图： 1:2 纵向布局，占据第3列前2行

中心： 1:1 正方布局，占据第2行第2列，作为视觉焦点

布局特点

视觉焦点：中心正方形作为整个布局的核心

层次分明：四角环绕，形成视觉引导

动态平衡：上下呼应，左右对称

适用场景：社交媒体九宫格、电商展示、图文排版

空间占比

横向大图： 2个（各占33.3%宽度）

纵向图片： 2个（各占33.3%高度）

纵向图片： 2个（各占33.3%高度）

中心焦点： 1个（正方形布局，居中突出）

技术实现

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

• 通过 grid-column 和 grid-row 属性精确控制每个元素位置

• 利用 z-index 实现元素的层叠关系，中心元素置顶

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

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