尝试将文本添加到 CSS 网格

Question

我正在尝试以简历样式创建网格模板。

基本上，我有一个包含 2 列 1 fr 和 3fr 的网格。

1fr 具有该部分的标题，而 3fr 具有所有内容。在 3fr 部分中，我正在添加工作经验，并将其布局以便有 2 列具有 display: flex 属性

每个都在一个带有 div 的部分中。

现在，当我添加第一个工作时看起来不错，但随后我添加了第二个工作，并将其分层在第一个工作之上，依此类推。我希望他们在该部分中基本上处于各自的行中。

我如何才能使它们不会相互堆叠，而是整齐地一个接一个地放置？

我需要在该网格行内制作另一个网格吗？

任何帮助都会很棒，请在下面查看我的 Codepen（这只是一个片段，请参阅下面的完整 codepen）

简历编码笔

.container {
  display: grid;
  max-width: 82em;
  max-height: auto;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav"
                       "about about-info"
                       "work work-info"
                       "education education-info"
                       "skills skills-info"
                       "footer footer";
  grid-template-rows: 300px 50px 12.50em 31em 500px 500px 50px;
  grid-template-columns: 1fr 3fr;
  grid-gap: .075em;
  background-color: white;
}

.work-info {
  border: 1px solid black;
  grid-area: work-info;
  display: flex;
}

Answer 1

您只需将“work-info”元素添加到一个单独的“section/div”中，然后需要更改grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;

请参阅以下链接了解工作示例： https://codepen.io/anon/pen/GGZPPy ?editors=1100