用 css grid 实现收货地址标签网格化选择：容器设 display: grid，列模板为 repeat(auto-fill, minmax(120px, 1fr)) 并配 gap: 8px；标签用 radio+label 语义化结构，通过 :checked + label 控制选中态样式；适配响应式与键盘导航，确保移动端点击热区和焦点可见性。
用 CSS Grid 实现收货地址标签的网格化选择，核心是让标签按行列自动排列、等宽响应、支持选中状态，并适配不同屏幕。不需要 JavaScript 控制布局，纯 CSS 即可完成结构与基础交互。
标签容器设为 grid 布局
给包裹所有地址标签的父容器（比如 <div class="address-tags">）设置 <code>display: grid，并定义列模板：
-
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))—— 每个标签最小 120px 宽，最大占满可用空间的一份，自动填满行；小屏时单列，大屏时多列 -
gap: 8px—— 控制标签之间横向纵向间距 -
width: 100%确保容器撑满父级，避免换行异常
单个标签样式与选中态控制
每个地址标签用 <button></button> 或带 role="button" 的 <div>，保证语义和可访问性：
<ul>
<li>默认样式：圆角、浅灰边框、居中文本、内边距适中</li>
<li>选中态用 <code>.active 类或 :checked 配合隐藏 radio + label 实现（推荐后者，便于表单提交）
适配移动端与键盘操作
网格本身会随屏幕缩放重排，但需额外保障交互友好：
- 标签高度设为
min-height: 40px，避免小屏点击热区过小 - 用
outline: 2px solid #007aff配合:focus-visible，确保键盘 Tab 导航有清晰焦点 - 禁用
user-select: none防止长按误触发文本选择
配合表单逻辑更实用
若需提交选中的地址 ID，建议用隐藏 radio + 可见 label 方式：
- 每个
<input type="radio" name="address" value="id123">对应一个<label></label> - label 内部用 grid 布局展示信息（如“张三 · 138****1234 · 浙江杭州”）
- 选中时通过
input:checked + label改变样式，同时天然绑定表单数据
