当前位置：首页 > news >正文

CSS Grid 高级技巧：布局的艺术与科学

news 2026/6/15 16:24:59

CSS Grid 高级技巧：布局的艺术与科学

掌握 Grid 布局的高级特性，创造复杂而优雅的界面。

一、Grid 布局的强大之处

作为一名追求像素级还原的 UI 匠人，我对 Grid 布局有着特殊的情感。它不仅是一种布局工具，更是一种设计语言，让我们能够在二维空间中自由地组织内容。从简单的卡片网格到复杂的仪表板，Grid 布局都能轻松应对。

二、基础回顾

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; gap: 1rem; height: 100vh; } .header { grid-column: 1 / -1; grid-row: 1; } .main { grid-column: 1 / 3; grid-row: 2; } .sidebar { grid-column: 3; grid-row: 2; } .footer { grid-column: 1 / -1; grid-row: 3; }

三、高级技巧

1. 网格模板区域

.dashboard { display: grid; grid-template-columns: 250px 1fr 1fr; grid-template-rows: 60px 1fr 200px; grid-template-areas: "sidebar header header" "sidebar main stats" "sidebar footer footer"; gap: 1rem; height: 100vh; } .sidebar { grid-area: sidebar; background: #f8f9fa; } .header { grid-area: header; background: #ffffff; } .main { grid-area: main; background: #ffffff; } .stats { grid-area: stats; background: #f8f9fa; } .footer { grid-area: footer; background: #ffffff; }

2. 自动填充与最小最大

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* 响应式调整 */ @media (min-width: 768px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (min-width: 1024px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } }

3. 命名网格线

.form-grid { display: grid; grid-template-columns: [label-start] 120px [input-start] 1fr [end]; grid-template-rows: repeat(3, [row-start] auto [row-end]); gap: 1rem; align-items: center; } .form-label { grid-column: label; font-weight: 500; } .form-input { grid-column: input; padding: 0.5rem; border: 1px solid #e2e8f0; border-radius: 4px; } .form-button { grid-column: input; justify-self: start; padding: 0.5rem 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 4px; cursor: pointer; }

四、复杂布局案例

1. 圣杯布局

.holy-grail { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "left main right" "footer footer footer"; gap: 1rem; min-height: 100vh; } @media (max-width: 768px) { .holy-grail { grid-template-columns: 1fr; grid-template-areas: "header" "main" "left" "right" "footer"; } }

2. 卡片瀑布流

.masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 0; gap: 1rem; } .masonry-item { grid-row-end: span var(--row-span, 1); background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .masonry-item:nth-child(1) { --row-span: 3; } .masonry-item:nth-child(2) { --row-span: 2; } .masonry-item:nth-child(3) { --row-span: 4; } .masonry-item:nth-child(4) { --row-span: 2; } .masonry-item:nth-child(5) { --row-span: 3; }

3. 响应式仪表板

.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .dashboard-card { background: white; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-1 { grid-column: 1 / 5; grid-row: 1; } .card-2 { grid-column: 5 / 9; grid-row: 1; } .card-3 { grid-column: 9 / 13; grid-row: 1; } .card-4 { grid-column: 1 / 13; grid-row: 2; } @media (max-width: 1024px) { .card-1, .card-2, .card-3 { grid-column: 1 / 13; } .card-1 { grid-row: 1; } .card-2 { grid-row: 2; } .card-3 { grid-row: 3; } .card-4 { grid-row: 4; } }