CSS Grid 布局

现代网页布局的终极解决方案！

基本语法

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

响应式设计

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

实用技巧

• grid-area: 指定网格区域
• minmax(): 自适应列宽
• auto-fit vs auto-fill: 灵活布局

Grid 让布局变得简单多了！