最简响应式两列布局用display: grid配合grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr)，小屏自动退为单列，大屏撑开成两列，无需媒体查询；加gap: 1rem稳定控制间距。
不需要框架、不写一堆 @media，用纯 HTML + 现代 CSS 就能实现真正可用的响应式布局——关键在选对容器模型和单位，而不是堆代码。
用 display: grid 实现两列自动适配
这是目前最简、最可靠的两列响应式方案，小屏单列、大屏双列，全程无媒体查询。
-
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr)是核心：每列最小 300px，剩余空间均分；窄屏下自动退为一列（因为总宽不够放两列） - 别写
1fr 1fr—— 小屏会把文字压成窄条，甚至触发横向滚动 -
gap: 1rem比margin更干净，不会因父容器overflow或padding出问题 - HTML 只需普通
<div class="container"></div>，不用额外 wrapper 或语义标签
用 display: flex + flex-wrap 做兼容性兜底
如果必须支持 IE11 或旧版 Safari，flex 是唯一不依赖 JS 的可行路径，但断点逻辑不能照搬设备尺寸。
- 断点设在
max-width: 640px，不是768px—— 它对应内容自然折行点，比“iPad 宽度”更可靠 -
flex: 1 1 300px必须显式写全三个值：避免子项被强行压缩或撑开 -
flex-wrap: wrap必须声明，否则子项会溢出容器右侧，引发横向滚动 - IE11 不支持
gap，得用li:not(:last-child) { margin-right: 1rem; }替代
为什么不能用 float 或 inline-block
这两种方式在新项目里等于主动放弃维护性。它们的问题不是“写不出来”，而是“改一次就崩一次”。
-
float需要额外clear清除，父子容器高度塌陷是常态，overflow: hidden又可能截断下拉菜单 -
inline-block元素间默认有空白间隙（来自换行符），用font-size: 0或注释删空格都只是补丁，不是解法 - 两者都不支持
gap、justify-content、align-items等现代对齐控制，适配多端时只能靠硬调margin和width
HTML 结构本身不响应，但语义影响渲染行为
纯 HTML 标签没有响应能力，但结构选择会直接影响 CSS 是否能稳定生效。
- 导航必须用
<nav><ul><li><a></a></li></ul></nav>，不是<div><div><span> —— 否则 <code>:checked ~ ul这类纯 CSS 展开逻辑会失效 - 九宫格卡片用
<article></article>或<section></section>包裹，比<div> 更利于屏幕阅读器识别内容区块 <li>所有图片必须加 <code>max-width: 100%; height: auto;，否则 Grid/Flex 再智能也拦不住撑破容器 - 别忽略
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 没它，移动端根本不会触发响应逻辑
真正难的不是让布局“看起来能变”，而是让它在中英文混排、字体放大、系统缩放、JS 加载失败等真实场景下依然不偏移、不截断、不卡死——这些细节藏在 minmax() 的阈值选择、gap 的 fallback 方案、以及每个子元素的内敛控制里。
