使用grid-template-columns写百分比最稳，如30% 70%，需确保总和为100%；小屏下须用@media(max-width:768px){grid-template-columns:1fr}切单列；子项无需设width:100%。
用 grid-template-columns 直接写百分比最稳
直接在容器上设 display: grid，然后用 grid-template-columns: 30% 70% 即可。这个百分比是相对于父容器宽度计算的，不需要额外约束父容器宽度（只要它本身有确定宽度，比如默认块级元素占满父宽）。
- 左右两列加起来必须等于 100%，写成
30% 70%或25% 75%都行，但别写30% 60%—— 剩下 10% 会变成隐式空列，可能撑出横向滚动条 - 百分比列宽在小屏下容易过窄（比如
15%在手机上只剩几十像素），所以一定要配@media切单栏：@media (max-width: 768px) { grid-template-columns: 1fr; } - 别给子元素再设
width: 100%—— Grid 子项默认填满所在轨道，重复设置可能触发多余换行或溢出
flex 下写百分比要配合 flex: 0 0 X%
如果用 display: flex，直接写 width: 30% 在子项上不可靠：Flex 子项默认会收缩/拉伸，width 只是初始建议值，内容一长就失效。
- 正确写法是用
flex: 0 0 30%—— 第一个0禁止放大，第二个0禁止缩小，30%才真正锁定基础宽度 - 必须同时设
align-items: flex-start在容器上，否则默认stretch会让两栏强行等高，简历这类内容长度天然不均的场景反而难看 - Flex 百分比依赖父容器有明确宽度；如果父容器是
position: absolute且没设width，百分比会按视口算，结果失控
表格里写 width="50%" 为什么经常无效
HTML 表格的 width 属性在默认 table-layout: auto 模式下只是“参考”，浏览器优先按内容撑开列宽。哪怕你写了 <td width="50%">，只要右边一列塞了长 URL，左边就会被压缩到几乎看不见。<ul>
<li>唯一可靠方式是组合：<code>table-layout: fixed + width: 100% + <col> 标签
<col> 必须放在 <table> 开头、<code><thead> 之前，顺序错就完全不生效<li>所有列都得显式声明 <code><col style="width: 30%">，漏一列，那一列就退回自动布局，破坏比例百分比宽度在响应式中容易忽略的细节
百分比本身没有“断点”概念，它只做相对计算。真正决定响应行为的是父容器是否随视口变化 —— 而这往往藏在更外层。
立即学习“前端免费学习笔记（深入）”；
- 如果外层用了
max-width: 1260px; margin: 0 auto，那30%就是基于 1260px 算的，不是视口宽度；大屏下两栏实际宽度会卡死在 378px 和 882px，失去弹性 - 想让百分比始终按视口算，得用
calc(50vw - 630px)控制 padding，把内容区域“推”到中心，而不是靠容器width约束 - 打印样式表里百分比常失效 —— 大部分浏览器打印预览强制用
table-layout: auto，表格列宽回归内容驱动，这时得单独写@media print覆盖
