Попытка добавить текст в сетку CSS

Question

Я пытаюсь создать шаблон сетки в стиле резюме.

По сути, у меня есть сетка, которая имеет 2 столбца 1 fr и 3fr.

1fr имеет заголовок раздела, а 3fr - весь контент.В разделах 3fr я описываю опыт работы, и у меня он разбит на два столбца со свойством отображения: flex

Каждый находится в разделе с элементом div.

Теперь это выглядит хорошо, когда я добавляю первое задание, но затем я добавляю второе задание, и оно накладывается поверх первого и так далее.Я хочу, чтобы они находились друг под другом в основном в своем ряду в этом разделе.

Как мне сделать так, чтобы они не накладывались друг на друга, а были аккуратно уложены один за другим?

Нужно ли создавать ДРУГОЙ сетку в этом ряду?

Любая помощь будет отличной, пожалуйста, проверьте мой 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

Я вижу, что вы пытаетесь поместить весь контент в единственную сетку CSS , но в этом нет необходимости.

Вместо этого, почему бы не отображать каждый <section> с использованием display: grid?

Затем вы можете настроить сетку для каждого раздела в соответствии с необходимостью в таблице стилей CSS.

Рабочий пример:

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>

Answer 2

Вам просто нужно добавить элементы 'work-info' в отдельный раздел 'section / div', и вам нужно изменить grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;

См. Следующую ссылку для рабочего примера: https://codepen.io/anon/pen/GGZPPy?editors=1100