CSS Grid 速查：三行代码做出两列布局与常见坑位图

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}
.item { background: #f5f5f5; padding: 12px; }

flowchart TD
    A[需求：两列布局] --> B[使用Grid]
    B --> C[grid-template-columns: 1fr 2fr]
    C --> D[gap控制间距]
    D --> E[响应式：在小屏改为一列]

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}