CSS Grid 是强大的二维网格布局系统,相比 Flexbox 更适合复杂页面结构。
实战示例:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
通过 auto-fit 和 minmax 实现无需媒体查询的响应式布局。视频演示:
(视频时长 4 秒)