CSS Grid 布局完全指南引言CSS Grid 是一种二维布局系统它允许开发者创建复杂的网格布局。本文将深入探讨 CSS Grid 的各种属性和高级用法。基础概念回顾Grid 术语Grid Container: 网格容器Grid Item: 网格项目Grid Line: 网格线Grid Track: 网格轨道行或列Grid Cell: 网格单元格Grid Area: 网格区域基本语法.container { display: grid; }高级技巧一定义网格grid-template-columns / grid-template-rows.container { display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: 50px 100px; }使用 fr 单位.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 比例分配 */ grid-template-rows: 100px 1fr; }使用 repeat().container { display: grid; grid-template-columns: repeat(3, 1fr); /* 重复3次 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充 */ }使用 auto-fit 和 auto-fill.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }高级技巧二网格间距gap 属性.container { display: grid; gap: 10px; /* 行和列间距 */ gap: 10px 20px; /* 行间距 列间距 */ }单独设置间距.container { display: grid; row-gap: 10px; column-gap: 20px; }高级技巧三项目定位grid-column 和 grid-row.item { grid-column: 1 / 3; /* 从第1列到第3列 */ grid-row: 2 / 4; /* 从第2行到第4行 */ }使用 span.item { grid-column: span 2; /* 跨越2列 */ grid-row: span 3; /* 跨越3行 */ }grid-area.item { grid-area: header; /* 使用命名区域 */ } .container { grid-template-areas: header header header sidebar main main footer footer footer; }高级技巧四对齐和排序justify-items 和 align-items.container { display: grid; justify-items: start; /* 水平对齐 */ align-items: center; /* 垂直对齐 */ place-items: center; /* 简写 */ }justify-content 和 align-content.container { display: grid; justify-content: center; /* 水平对齐 */ align-content: space-between; /* 垂直对齐 */ place-content: center; /* 简写 */ }justify-self 和 align-self.item { justify-self: end; /* 单独水平对齐 */ align-self: stretch; /* 单独垂直对齐 */ place-self: center; /* 简写 */ }实战案例响应式网格布局.responsive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; padding: 1rem; } .card { padding: 1.5rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }div classresponsive-grid div classcardCard 1/div div classcardCard 2/div div classcardCard 3/div div classcardCard 4/div /div实战案例页面布局.page-layout { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: header header sidebar main footer footer; min-height: 100vh; } .header { grid-area: header; padding: 1rem; background: #333; color: white; } .sidebar { grid-area: sidebar; padding: 1rem; background: #f0f0f0; } .main { grid-area: main; padding: 1rem; } .footer { grid-area: footer; padding: 1rem; background: #333; color: white; }div classpage-layout header classheaderHeader/header aside classsidebarSidebar/aside main classmainMain Content/main footer classfooterFooter/footer /div实战案例九宫格布局.magic-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 5px; } .magic-grid .item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .magic-grid .item:nth-child(5) { grid-column: span 2; }div classmagic-grid div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div实战案例表单布局.form-grid { display: grid; grid-template-columns: [label] 120px [input] 1fr; gap: 0.5rem 1rem; align-items: center; } .form-grid label { grid-column: label; text-align: right; } .form-grid input, .form-grid textarea { grid-column: input; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } .form-grid textarea { grid-column: input; grid-row: span 3; } .form-actions { grid-column: input; justify-self: end; }form classform-grid label fornameName/label input typetext idname label foremailEmail/label input typeemail idemail label formessageMessage/label textarea idmessage/textarea div classform-actions button typesubmitSubmit/button /div /form实战案例动态网格.dynamic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } media (min-width: 768px) { .dynamic-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } media (min-width: 1024px) { .dynamic-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }常见问题与解决方案Q1网格不显示A确保容器有尺寸.container { display: grid; height: 500px; /* 需要高度 */ }Q2项目重叠A检查 grid-column/grid-row 是否冲突.item { grid-column: 1 / span 2; /* 正确 */ }Q3响应式布局问题A使用 auto-fill 和 minmax.container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }最佳实践1. 使用命名网格线.container { display: grid; grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end]; }2. 使用 CSS 变量:root { --grid-gap: 1rem; --sidebar-width: 250px; } .container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: var(--grid-gap); }3. 结合 Flexbox 使用.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-item { display: flex; /* 内部使用 flexbox */ flex-direction: column; justify-content: space-between; }总结CSS Grid 是创建复杂布局的强大工具。通过本文的学习你应该能够定义网格结构定位网格项目使用响应式网格创建复杂布局模式结合其他布局技术掌握这些技巧能够帮助你创建更加灵活和强大的布局。