两行代码就能适应任何屏幕，不需要响应式

你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。

马上教你用！✨

🧩 基础概念

假设你有这样一个需求：

• 一排展示很多卡片
• 每个卡片最小宽度 200px，剩余空间平均分配
• 屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

css

代码解读

复制代码

/* 父元素 */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* 子元素 */ .item { height: 200px; background-color: rgb(141, 141, 255); border-radius: 10px; }

下面详细解释这行代码的意思：

css

代码解读

复制代码

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

1. grid-template-columns

• 作用：定义网格容器