Trying to add Text to CSS Grid

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>