时间戳

首页 > 解决方案 > 如何修复不匹配的 CSS 网格单元大小？

css-grid - 如何修复不匹配的 CSS 网格单元大小？

问题描述

以下响应式 css 网格代码生成大小不匹配的单元格。我一辈子都想不通这是怎么可能的。

#service-icons {
    display: grid;
    margin-top: 3rem;
    margin-bottom: 3rem;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    justify-items: center;
    align-items: center;
}
.service-icon {
    position: relative;
    display: inline-block;
    margin: 1rem;
    margin-bottom: 0;
}

有问题的页面可以在这里找到。（确保缩小浏览器窗口以确保使用移动样式。）

这是显示错误结果的屏幕截图：

屏幕截图.jpg

标签： css-grid

解决方案

根据 Zohir 在问题下的评论，不匹配的大小可以通过文本元素的不同宽度来解释。较大的文本大小会使网格单元大小超出其最小值。允许文本元素在新的父元素中溢出解决了实践中的问题。

推荐阅读