I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have:
https://i.sstatic.net/l55oW.png
The container css is set up like this:
.experience-child {
display: grid;
grid-template-columns: 2fr 6fr;
grid-template-rows: repeat(5, 1fr);
margin-bottom: 6em;
font-family: 'Alumni Sans', sans-serif;
}
I've tried various methods including adjusting row-gap, margin, padding, and adding grid-auto-rows to the container but haven't been successful.
Here's the HTML & CSS for replication:
<div class="experience-child">
<p class="years">2001-2001</p>
<p class="jobrole">Job Role</p>
<p class="company">Company Name</p>
<ul class="job-blurb">
<li>this</li>
<li>that</li>
<li>other</li>
</ul>
</div>
.experience-child {
display: grid;
grid-template-columns: 2fr 6fr;
grid-template-rows: repeat(5, 1fr);
margin-bottom: 6em;
font-family: 'Alumni Sans', sans-serif;
}
.last {
margin-bottom: 0;
}
.jobrole {
font-weight: bold;
}
.company {
grid-area: 2 / 2 / 3 / 3;
font-weight: bold;
}
.job-blurb {
grid-area: 3 / 2 / 5 / 3;
}