如何用CSS Grid实现订单页信息块分组展示？-css教程-PHP中文网

订单页信息块用grid而非flex，因其天然二维结构需同时纵向分组与横向对齐字段；flex仅支持一维布局，强行实现易致嵌套混乱与调试困难，而grid通过grid-template-areas或grid-column可语义化、精准控制区域与字段位置，响应式更可控。

如何用css grid实现订单页信息块分组展示？

订单页信息块为什么要用 grid 而不是 flex

因为订单页的信息块（如「收货信息」「支付方式」「商品清单」「物流跟踪」）天然具有二维结构：既要纵向分组，又常需横向对齐字段（比如「收货人」和「电话」并排、「下单时间」和「订单号」同行）。flex 擅长一维布局，强行用它做多行多列对齐容易陷入嵌套 div 和反复 flex-wrap + justify-content 调试；而 grid 用 grid-template-areas 或 grid-column 直接定义区域关系，语义清晰、响应式也更可控。

用 grid-template-areas 快速划分信息区块

适合区块数量固定、结构明确的订单页。把每个信息块包装成带 class 的容器，再用 grid-area 命名，比纯行列线数更直观。

`.order-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "shipping payment"
    "items items"
    "tracking tracking";
  gap: 16px;
}

.order-header { grid-area: header; }
.order-shipping { grid-area: shipping; }
.order-payment { grid-area: payment; }
.order-items { grid-area: items; }
.order-tracking { grid-area: tracking; }`

注意点：

grid-template-areas 中每组引号代表一行，空格分隔列，重复名称（如 "items items"）表示该区块横跨两列
所有子元素必须显式设置 grid-area，漏设会导致布局塌陷
移动端想改成单列？直接重写 grid-template-areas："header" "shipping" "payment" "items" "tracking"

用 grid-column 控制字段级对齐（比如收货信息里的地址+电话）

区块内字段不对齐是订单页高频问题——比如「省市区」和「详细地址」需要错开缩进，或「发票类型」和「发票抬头」需左右对齐。这时别在区块里再套 flex，直接用 grid-column 精确控制字段起止列线。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

`.shipping-fields {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1fr;
  gap: 8px;
}

.shipping-label { grid-column: 1; }
.shipping-value { grid-column: 2; }
.phone-label { grid-column: 3; }
.phone-value { grid-column: 4; }`

关键细节：

grid-column: 1 等价于 grid-column-start: 1; grid-column-end: 2;，写数字比写 span 1 更稳，避免因隐式轨道数变化导致错位
如果某行只有两个字段（如仅「订单号」和「下单时间」），给它们分别设 grid-column: 1 / 3 和 grid-column: 3 / 5，就能严格按四列网格对齐，不依赖内容宽度
IE 不支持 grid-column 数字语法，如需兼容，得降级用 grid-column-start + grid-column-end