CSS Grid 布局完全教程

CSS Grid 是强大的二维网格布局系统,相比 Flexbox 更适合复杂页面结构。

实战示例:

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

通过 auto-fit 和 minmax 实现无需媒体查询的响应式布局。视频演示:

(视频时长 4 秒)