本文介绍使用 css grid 将对象数组（如含 subheading 的列配置）以简洁、响应式的方式渲染为严格两列的 html 布局，无需复杂逻辑或表格嵌套，兼顾可读性与维护性。
本文介绍使用 css grid 将对象数组（如含 subheading 的列配置）以简洁、响应式的方式渲染为严格两列的 html 布局，无需复杂逻辑或表格嵌套，兼顾可读性与维护性。
在前端开发中，将一维对象数组（如菜单项、分类标题等）按固定列数（例如 2 列）进行视觉排布，是常见需求。与其使用语义化较弱的 <table> 或手动拆分数组再嵌套 <div>，CSS Grid 是最简洁、健壮且现代的解决方案。
核心思路是：利用 display: grid 和 grid-template-columns: 1fr 1fr 创建两列等宽网格容器，然后直接对原始数组执行 .map() 渲染每个子项——Grid 会自动按行优先顺序将元素填入两列，无需预处理数据结构。
以下为完整实现示例（基于 React，但 CSS Grid 方案同样适用于纯 HTML + JS）：
const columns = [
{ subHeading: "A", subText: ["1", "2"] },
{ subHeading: "B", subText: ["3", "4"] },
{ subHeading: "C", subText: ["5", "6"] },
{ subHeading: "D", subText: ["7", "8"] }
];
function TwoColumnTable() {
return (
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "16px" // 推荐添加间距提升可读性
}}
>
{columns.map((col, index) => (
<div key={index}>
<h3>{col.subHeading}</h3>
<ul>
{col.subText.map((text, i) => (
<li key={i}>{text}</li>
))}
</ul>
</div>
))}
</div>
);
}✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 零数据转换：无需 Array.prototype.reduce() 或 slice() 拆分数组，保持源数据纯净；
- 天然响应式基础：后续可通过媒体查询轻松升级为 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 实现自适应多列；
- 语义清晰：相比 <table>（适用于二维关系型数据），Grid 更契合“并列展示多个独立区块”的语义；
- 样式可控性强：支持 gap、justify-items、align-items 等精细控制对齐与间距。
⚠️ 注意事项：
- 若数组长度为奇数（如 5 项），Grid 会自动在第二列底部留空，视觉上仍保持两列对齐，无需额外处理；
- 避免在 Grid 容器内混用 float 或 inline-block 布局，以防冲突；
- 在旧版浏览器（如 IE11）中需提供降级方案（如 Flexbox fallback），但现代项目可放心使用。
综上，CSS Grid 不仅是最易实现的两列渲染方式，更是面向未来、可扩展性极强的布局选择。
