Attempting to incorporate text into a CSS Grid

Question

Attempting to incorporate text into a CSS Grid

I am currently experimenting with creating a grid layout inspired by a resume design.

Essentially, my grid consists of 2 columns - one set to 1 fraction and the other set to 3 fractions.

The column with 1fr contains section titles, while the 3fr column holds all the content. Within one of the 3fr sections, I have implemented a display: flex property to create a two-column layout.

Each segment is contained within a div section.

While it looks great when adding the first job entry, subsequent entries stack on top of each other instead of appearing in their own rows within that section. I want them to neatly line up next to each other without overlapping.

Should I establish another grid within that specific row to achieve this effect?

Your assistance would be highly appreciated. Please refer to my full Codepen for more details:

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;
}

css html flexbox css-grid

Answer 1

Answer №1

To organize your code better, simply add 'work-info' elements inside a separate 'section/div' and update the

grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;

For a live example, check out this link: https://codepen.io/anon/pen/GGZPPy?editors=1100

Answer 2

To organize your code better, simply add 'work-info' elements inside a separate 'section/div' and update the

grid-template-rows: 300px 50px 12.50em auto 500px 500px 50px;

For a live example, check out this link: https://codepen.io/anon/pen/GGZPPy?editors=1100

Answer 3

Answer №2

It appears that you are aiming to consolidate all content into a single CSS grid, however, this may not be necessary.

Instead, consider showcasing each <section> individually using display: grid.

This way, you can tailor the grid for each section according to your requirements in the CSS stylesheet.

Here is an 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, enthusiastic educator dedicated to student development and the learning experience. Skilled in providing quality instruction and facilitating student growth.</p>

<p>Objective: To leverage teaching skills acquired in elementary education to foster self-reliant problem solvers and lifelong learners amongst students through rigorous and data-driven instruction.</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>Responsible for organizing, teaching, and implementing curriculum</li>
<li>Utilized student data analysis to meet diverse needs</li>
<li>Implemented various instructional methods effectively</li>
<li>Established positive discipline plan</li>
<li>Led Professional Learning Communities</li>
<li>Knowledgeable of TEKS and academic 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, planned interventions, and provided small-group support using best practices</h3>

<ul>
<li>Responsible for organizing, teaching, and implementing curriculum</li>
<li>Utilized student data analysis to meet diverse needs</li>
<li>Implemented various instructional methods effectively</li>
<li>Established positive discipline plan</li>
<li>Led Professional Learning Communities</li>
<li>Knowledgeable of TEKS and academic expectations</li>
</ul>
</div> 
</section>
     
  
<section class="education">
<div>
<h2>Education</h2>
</div>

<div>Education Details</div>
</section>

<section class="skills">
<div>
<h2>Skills</h2>
</div>

<div>Skills Overview</div>
</section>

</main>

Answer 4

It appears that you are aiming to consolidate all content into a single CSS grid, however, this may not be necessary.

Instead, consider showcasing each <section> individually using display: grid.

This way, you can tailor the grid for each section according to your requirements in the CSS stylesheet.

Here is an 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, enthusiastic educator dedicated to student development and the learning experience. Skilled in providing quality instruction and facilitating student growth.</p>

<p>Objective: To leverage teaching skills acquired in elementary education to foster self-reliant problem solvers and lifelong learners amongst students through rigorous and data-driven instruction.</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>Responsible for organizing, teaching, and implementing curriculum</li>
<li>Utilized student data analysis to meet diverse needs</li>
<li>Implemented various instructional methods effectively</li>
<li>Established positive discipline plan</li>
<li>Led Professional Learning Communities</li>
<li>Knowledgeable of TEKS and academic 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, planned interventions, and provided small-group support using best practices</h3>

<ul>
<li>Responsible for organizing, teaching, and implementing curriculum</li>
<li>Utilized student data analysis to meet diverse needs</li>
<li>Implemented various instructional methods effectively</li>
<li>Established positive discipline plan</li>
<li>Led Professional Learning Communities</li>
<li>Knowledgeable of TEKS and academic expectations</li>
</ul>
</div> 
</section>
     
  
<section class="education">
<div>
<h2>Education</h2>
</div>

<div>Education Details</div>
</section>

<section class="skills">
<div>
<h2>Skills</h2>
</div>

<div>Skills Overview</div>
</section>

</main>

Attempting to incorporate text into a CSS Grid

Answer №1

Answer №2

Similar questions

Tips for creating responsive content within an iframe

Discover the best way to simultaneously trigger or detect all instances of a component when it is used multiple times in Ember

Utilize jQuery append() to create a grid layout using <td> tags

Is it possible to utilize a hyphen in the link_to attribute?

What is the best way to align a tweet in the middle of

Creating an AngularJS directive specifically for a certain <div> tag

Is there a way to have the inline form appear on the same line as the buttons?

Accessing information from a database and showcasing it within a tooltip

Issues with button hover causing background transition difficulties

Is there a way to maintain the original style of an HTML element when printing it?

The information about the property is not appearing on the screen

When attempting to access the callback response with HTML tags from the server, the AJAX request in jQuery fails

Tips for converting binary image data stored in a database and viewing the images on a web browser

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

centered logo in a flexbox header

The CSS styling is not being rendered correctly on the AngularJS HTML page

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

"Customize your Vuetify v-card with uniquely styled rounded corners on only

``There seems to be an issue with the functionality of the href link

Close button for body