CSS Grid Layout 实战指南

CSS Grid Layout 实战指南

引言

CSS Grid 是现代布局的核心技术。本文将通过实战案例深入探讨 Grid 的各种用法和高级技巧。

基础概念回顾

Grid 容器属性

• display: grid: 创建网格容器
• grid-template-columns: 列定义
• grid-template-rows: 行定义
• grid-gap/gap: 间距
• grid-template-areas: 区域定义
• justify-items: 水平对齐
• align-items: 垂直对齐

Grid 子项属性

• grid-column: 列位置
• grid-row: 行位置
• grid-area: 区域名称
• justify-self: 单独水平对齐
• align-self: 单独垂直对齐

实战案例一：基础网格布局

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.item {
background: white;
padding: 20px;
border-radius: 8px;
}

响应式网格

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

实战案例二：复杂布局

博客布局

.blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
gap: 20px;
min-height: 100vh;
}

.header {
grid-area: header;
background: #667eea;
padding: 20px;
}

.main {
grid-area: main;
padding: 20px;
}

.sidebar {
grid-area: sidebar;
padding: 20px;
background: #f5f5f5;
}

.footer {
grid-area: footer;
background: #333;
color: white;
padding: 20px;
}

卡片布局

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
padding: 24px;
}

.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}

.card-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 16px;
}

.card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}

.card-description {
flex: 1;
font-size: 14px;
color: #666;
line-height: 1.6;
}

.card-footer {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}

实战案例三：仪表板布局

.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(150px, auto);
gap: 20px;
padding: 24px;
}

.widget {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.widget.large {
grid-column: span 2;
grid-row: span 2;
}

.widget.medium {
grid-column: span 2;
}

.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}

.widget-title {
font-size: 14px;
font-weight: 600;
color: #666;
}

.widget-value {
font-size: 32px;
font-weight: 700;
color: #667eea;
}

实战案例四：表单布局

.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 800px;
margin: 0 auto;
padding: 24px;
}

.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.form-group label {
font-weight: 500;
font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
}

.form-group textarea {
resize: vertical;
min-height: 100px;
}

.form-group.full-width {
grid-column: 1 / -1;
}

.form-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}

.btn {
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
border: none;
}

.btn-primary {
background: #667eea;
color: white;
}

.btn-secondary {
background: #f0f0f0;
color: #333;
}

实战案例五：图片画廊

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 200px;
gap: 12px;
padding: 24px;
}

.gallery-item {
overflow: hidden;
border-radius: 8px;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.gallery-item:hover img {
transform: scale(1.1);
}

.gallery-item:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}

.gallery-item:nth-child(4) {
grid-column: span 2;
}

.gallery-item:nth-child(6) {
grid-row: span 2;
}

实战案例六：定价表格

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
padding: 48px 24px;
}

.pricing-card {
background: white;
border-radius: 16px;
padding: 32px;
text-align: center;
position: relative;
}

.pricing-card.popular {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
transform: scale(1.05);
}

.pricing-card.popular::before {
content: 'Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: white;
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}

.pricing-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}

.pricing-price {
font-size: 48px;
font-weight: 700;
margin-bottom: 16px;
}

.pricing-price span {
font-size: 18px;
font-weight: 400;
}

.pricing-description {
font-size: 14px;
color: #999;
margin-bottom: 24px;
}

.pricing-features {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 24px;
}

.pricing-features li {
padding: 12px 0;
border-bottom: 1px solid #eee;
}

.pricing-card.popular .pricing-features li {
border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pricing-button {
width: 100%;
padding: 14px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
border: 2px solid #667eea;
background: transparent;
transition: all 0.3s ease;
}

.pricing-card.popular .pricing-button {
background: white;
color: #667eea;
}

.pricing-button:hover {
background: #667eea;
color: white;
}

.pricing-card.popular .pricing-button:hover {
background: #f0f0f0;
}

常见问题与解决方案

Q1：网格项溢出？

A：使用 minmax 控制尺寸：

.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Q2：网格间距不均匀？

A：使用 gap 属性：

.container {
gap: 20px;
}

Q3：响应式布局？

A：使用 auto-fit 和 minmax：

.container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

最佳实践

1. 使用 repeat() 函数

.container {
grid-template-columns: repeat(3, 1fr);
}

2. 使用 auto-fit/auto-fill

.container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

3. 使用 grid-template-areas

.container {
grid-template-areas:
"header header"
"main sidebar";
}

总结

CSS Grid 是现代布局的核心技术。通过本文的学习，你应该能够：

掌握这些技巧，能够帮助你创建更加灵活和强大的布局。