Trying to add Text to CSS Grid - css

Question

I am trying to create a grid template in the style of a resume.
Basically, I have a grid that has 2 columns 1 fr and 3fr.
The 1fr has the title of the section and the 3fr has all the content.
In of the 3fr sections, I am putting work experience, and I have it laid out so that the there are 2 columns with a property of display: flex
Each is in a section with a div.
Now it looks good when I add the first job but then I add a second job and it layers it on top of first and so on. I want them to be under each other basically in their own row within that section.
How do I make it so that they do not stack on each other but are rather neatly laid one right after another?
Do I need to make ANOTHER grid within that grid row?
Any help would be great please check my Codepen below
(this is just a snippet please see below for full codepen)
Resume 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

You just have to add 'work-info' elements into one separate 'section/div' and need to change grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;
See the following link for working example:
https://codepen.io/anon/pen/GGZPPy?editors=1100

Answer 2

I can see that you are trying to place all of the content into a single CSS grid, but this isn't necessary.
Instead, why not display each <section> using display: grid?
Then you can customise the grid for each section as needed in the CSS stylesheet.
Working Example:
body {
font-family: arial, helvetica, sans-serif;
}
h2 {
font-size: 18px;
}
h3, p {
font-size: 16px;
}
header, main section {
padding: 0 6px;
box-shadow: 2px 2px 3px rgb(127, 127, 127);
}
main section div {
padding: 4px 6px;
border-right: 1px solid rgb(227, 227, 227);
}
main section div:last-of-type {
border-right: none;
}
main section {
display: grid;
max-width: 82em;
grid-template-columns: 25% 75%;
margin-bottom: 24px;
}
main section.work {
display: grid;
max-width: 82em;
grid-template-columns: 25% 25% 50%;
grid-template-rows: repeat(2, auto);
}
main section.work div:nth-of-type(1) {
grid-area: 1 / 1 / span 2 / 2;
}
<header><h1>Resume</h1></header>
<main>
<section class="about">
<div>
<h2>Nylma Jorns</h2>
<p>Reading and Writing Specialist</p>
</div>
<div>
<p>Caring, and enthusiastic educator with a strong commitment to student development and the learning experience. Excellent background and proven success in helping students reach their full potential.</p>
<p>Objective: To utilize the education and developing skills in teaching I have acquired over the years of teaching within the elementary grade level. To ensure that all students receive quality, rigorous, and data-driven instruction to ensure that all become self-reliant problem solvers. To help all students achieve goals and become life-long learners.</p>
</div>
</section>
<section class="work">
<div>
<h2>Work Experience</h2>
</div>
<div class="work-title">
<h3>Teacher</h3>
<p class="small">Fort Worth Independent School District</p>
<p class="small"><strong>Period:</strong> 2011 - Present<br>
<strong>Job type:</strong> Full-Time<br>
<strong>References:</strong> Seretha Lofton, Mrs. Staten</p>
</div>
<div class="work-description">
<h3>1st, 3rd, and 4th Grade Teacher (ESL, Self-Contained, Departmentalized, Two-Way DL, Team Teacher)</h3>
<ul>
<li>Maintain complete responsibility for the organization, teaching, and implementation of Curriculum</li>
<li>Successfully analyze student data to plan accordingly and meet various needs</li>
<li>Successfully implement interventions, centers, whole group, small groups, and technology</li>
<li>Implemented a positive discipline plan which promotes student responsibility and accountability</li>
<li>Lead PLCS to ensure that student achievement is the end goal</li>
<li>Knowledge of TEKS and student expectations</li>
</ul>
</div>
<div>
<h3>Reading and Math Interventionist, K-8th Grade</h3>
<p class="small">Catapult Learning</p>
<p class="small">
<strong>Period:</strong> 2011 - 2011<br>
<strong>Job type:</strong> Part-Time
</div>
<div>
<h3>Analyzed student data using various assessment tools, plan accordingly, and provide interventions in small groups using best practices</h3>
<ul>
<li>Maintain complete responsibility for the organization, teaching, and implementation of Curriculum</li>
<li>Successfully analyze student data to plan accordingly and meet various needs</li>
<li>Successfully implement interventions, centers, whole group, small groups, and technology</li>
<li>Implemented a positive discipline plan which promotes student responsibility and accountability</li>
<li>Lead PLCS to ensure that student achievement is the end goal</li>
<li>Knowledge of TEKS and student expectations</li>
</ul>
</div>
</section>
<section class="education">
<div>
<h2>Education</h2>
</div>
<div>Education Stuff</div>
</section>
<section class="skills">
<div>
<h2>Skills</h2>
</div>
<div>Skills Stuff</div>
</section>
</main>