什么鬼？两行代码就能适应任何屏幕？

文章预览

（💰金石瓜分计划回归，速戳下图 了解详情🔍） 你可能想不到，只用 「两行 CSS」 ，就能让你的卡片、图片、内容块 「自动适应」 各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的  auto-fill  和  auto-fit 。 马上教你用！✨ 🧩 基础概念 假设你有这样一个需求： 一排展示很多卡片 每个卡片最小宽度 200px，剩余空间平均分配 屏幕变窄时自动换行 只需在父元素加两行 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; } 下面详细解释这行代码的意思： grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下： 1.  grid-template-columns 作用：定义 「网格容器」 里有多少 ………………………………