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

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 和 class 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好像是一样的！我不明白为什么其中之一不起作用。

LINK FOR JSFIDDLE：https://jsfiddle.net/69z2wepo/121098/（无响应）

Answer 1

我看了一下，但无法弄清楚造成差异的原因。我猜这是页面上其他地方的样式，或者是因为元素的结构略有不同。

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

Answer 2

您的图像图标 (.dev-icon-* colored) 是 inline-level ::before pseudo-elements 的列表，每个图标都包含在 inline-level i 元素，它们都包含在 block-level div 元素中。

图标由第三方服务提供(devicon)。

无论出于何种原因，这些 pseudo-elements、作为 devicon 图标，不要换行。

但是，如果您将 devicon 代码（例如 content: "\e845"）切换为纯文本（例如 content: "text text text text"），则 pseudo-elements 会换行。

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

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

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

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

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

css-grid div not resizing when used in react component

html

css

responsive-design

reactjs

css-grid