CSS Grid网格布局：前端布局的“原子弹”，复杂页面轻松搞定！

一、为什么Grid是布局“原子弹”？

传统布局的末日审判：
 

.header { float: left; width: 100%; }
.left { 
  float: left; 
  width: 200px; 
  margin-left: -100%;
}
/* 此处省略30行... */
.footer { clear: both; }

Grid一键核爆：

.container {
  display: grid;
  grid-template: 
    "header header" 80px
    "sidebar main" 1fr
    "footer footer" 60px / 200px 1fr;
}

核心优势：

• 二维精准控制：同时操作行与列，告别嵌套地狱

• 结构与样式分离：无需修改HTML即可重构布局

• 响应式终极方案：无需媒体查询实现自适应

二、Grid核心概念：太空战舰的操作台

1. 容器(Container) vs 项目(Item)

  
  
A
  
  
B

.battleship {
  display: grid; /* 启动网格引擎！ */
}

2. 轨道系统：行与列的宇宙坐标

.battleship {
  grid-template-columns: 200px 1fr 0.5fr; /* 三列：定宽+弹