CSS GRID自动填充，按钮重叠，取决于分辨率

Question

在使用CSS网格自动填充时，我有一个按钮与另一个按钮重叠，具体取决于屏幕大小。我把它们放在自己的HTML部分，它包含两个div，每个按钮都在它自己的div中。

无论分辨率如何，可以采取哪些措施来防止重叠？另外，无论分辨率如何，我如何确保按钮仅相隔3px？

jsFiddle没有重现这个问题。这可能是Telerik问题，但我不确定这是否是自动填充问题。

HTML：

            <section class="sectionSaveChecked">

                <div class="itemBtnJump">
                    <telerik:RadButton ID="Jump" runat="server" Text="Jump to Management">
                        <Icon PrimaryIconCssClass="rbNext"></Icon>
                    </telerik:RadButton>
                </div>

                <div class="itemBtnSaveChecked">
                    <telerik:RadButton ID="SavePlacedChecked" runat="server" Text="Save Checked">
                        <Icon PrimaryIconCssClass="rbSave"></Icon>
                    </telerik:RadButton>
                </div>

            </section>

CSS：

        .sectionSaveChecked {
            display: grid;
            grid-gap: 3px;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

截图：

Answer 1

我相信这与'telerik'有关。我使用普通的HTML / CSS标记重新创建了上述的简单版本，无法重新创建问题。我在视觉上看到它后注意到的是，文本和按钮很可能具有冲突的边距和/或填充。因此，网格最有可能只在其计算中查看其中一项，而不是另一项，这可能导致这种“重叠”。

简单地说，我相信在文本影响所述按钮之前，网格可能正在查看按钮的宽度。当您在容器上显示：grid时，它仅影响容器的子项，而不影响孙子项。

您可以采用的一种解决方案是尝试将子div的宽度设置为200px（“itemBtnJump”和“itemBtnSaveChecked”），然后查看重叠是否仍然存在。

Answer 2

如何解决这个问题是在按钮上设置宽度并将网格模板列更改为; grid-template-columns：repeat（auto-fill，220px）;