CSS Grid 与 Flexbox 布局实战

一、Flexbox 一维布局

适合导航栏、卡片行等横向排列：

.nav { display: flex; gap: 16px; align-items: center; }

二、Grid 二维布局

适合整体页面栅格：

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

三、响应式

用 minmax() 与 auto-fit 让网格自适应列数，减少媒体查询。