使用 grid-template-columns 实现工具栏按钮均分，推荐 repeat(auto-fit, minmax(0,1fr)) 方案。首先设置容器 display: grid，若按钮数量固定，可直接用 repeat(4, 1fr) 均分四列；对于动态数量，采用 auto-fit 能自动填充列，配合 minmax(0,1fr) 使每项等宽自适应。需确保父容器有明确宽度，避免子项设固定宽，并处理长文本溢出。该方法灵活、兼容性好，是均分布局的优选方案。
在CSS Grid中实现工具栏按钮均分，最简单的方式是使用 grid-template-columns: 1fr; 配合子项数量来让每个按钮占据相等宽度。下面介绍具体用法。
假设你有一个工具栏容器，里面包含多个按钮：
<div class="toolbar"> <button>剪切</button> <button>复制</button> <button>粘贴</button> <button>删除</button> </div>
为了让这4个按钮均分容器宽度，可以这样写CSS：
.toolbar {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4个按钮，每列等宽 */
gap: 2px; /* 按钮之间留点空隙 */
}
这样每个按钮都会平均分配父容器的可用空间，无论屏幕大小如何变化。
立即学习“前端免费学习笔记（深入）”；
如果你不确定按钮数量，或者希望更灵活地处理不同数量的按钮，可以用 repeat(auto-fit, 1fr)：
.toolbar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 2px;
}
说明：
auto-fit 让Grid自动计算列数minmax(0, 1fr) 允许每列最小为0，最大为1fr，确保能均分使用时注意以下几点：
overflow: hidden 或使用 text-overflow 处理基本上就这些。用 grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) 是最推荐的做法，灵活且兼容性好。不复杂但容易忽略细节。
以上就是如何在CSS中使用Grid制作工具栏按钮均分_grid-template-columns 1fr均分的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
534
收藏
