CSS Grid 布局

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

 基本语法

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


 响应式设计

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


 实用技巧

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

Grid 让布局变得简单多了！