css-grid div在反应组件中使用时不调整大小

Question

我已经在我已经制作的示例组合页面中制作了一个css网格布局，当我用html / css做它时工作正常并且响应：代码在这里：https://codepen.io/abhinavthinktank/full/YevQNq/

没有响应的那个主持在这里：https://abhinav-m.github.io/

相同的反应成分在这里：https://github.com/abhinav-m/personal-portfolio/tree/master/src/components

我使用react，sass和node做了同样的事情，但是这个没有响应，确切地说div与类techStack没有调整大小。这是网格布局css：

.gridContainer {
 display: grid;
 grid-template-rows: 15px 10% 20% 10% 20% 20% 20% 25px;
 grid-template-columns: 10% 80% 10%;
 grid-row-gap: 25px;
 justify-items: center; }

和div class='techStack' css：

.techStack {
 grid-row: 6 / 7;
 grid-column: 2 / 3;
 background: bisque; }

两者的CSS看起来都是一样的！我不明白为什么其中一个不起作用。

链接JSFIDDLE：https://jsfiddle.net/69z2wepo/121098/（没有响应）

Answer 1

你的图像图标（.dev-icon-* colored）是一个内联级别的::before伪元素列表，它们都包含在一个内联级别的i元素中，它们都包含在块级div元素中。

图标由第三方服务（devicon）提供。

无论出于何种原因，这些伪元素（如devicon图标）都不会换行。

但是，如果您使用纯文本（例如content: "\e845"）切换出devicon代码（例如content: "text text text text"），则伪元素会换行。

或者，如果你将div容器从display: block（默认值）切换到display: flex，那么devicons也会换行。

所以问题似乎归结为块容器中的devicons。

这是一个简单的整体解决方案：

div.icons {
    display: flex;
    flex-wrap: wrap;
}

Answer 2

我看了一眼，但我无法弄清楚差异的原因是什么。我猜它是页面上其他地方的一种风格，或者因为元素的结构略有不同。

但是，如果您将图标的样式设置为display: inline-block，那么它可以解决您的问题。