Question

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

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

1fr具有该部分的标题，而3fr具有所有内容。在3fr部分中，我正在提供工作经验，我已将它布局为有2列具有显示属性：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

您只需添加＆＃39; work-info＆＃39;元素分成一个单独的部分/ div＆＃39;并需要更改grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;

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

Answer 2

我可以看到您正在尝试将所有内容放入单个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>

尝试将文本添加到CSS网格

2 个答案: