1fr 1fr vs auto auto vs 50% 50%

1fr 1fr vs auto auto vs 50% 50%

摘要

CSS中的grid-template-columns属性支持多种单位定义列宽，如50% 50%、auto auto和1fr 1fr。虽然它们都能实现等宽列，但在不同场景下表现各异。50%单位可能导致布局溢出，auto单位会根据内容自适应，而fr单位则更直观且灵活。通过minmax(0, 1fr)可以避免内容撑破布局。混合使用不同单位能实现更复杂的网格设计。