CODEWITHSUNDEEP
htmlcsscss-grid
Kamal Sharma
Kamal Sharma

Reputation: 90

Reduce space between elements in a css grid layout

I have a grid layout that looks like this:

enter image description here

I would like to reduce the whitespace between 'Job Role' and 'Company Name' & I cannot work out how to do this.

The container css looks 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 have tried:

Thank you very much.

HTML & CSS to replicate:

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

Upvotes: 1

Views: 4021

Answers (2)

Dorin Botan
Dorin Botan

Reputation: 1388

grid-template-rows: repeat(5, 1fr); indicates that your grid has 5 rows of equal height. That's the height of the .experience-child container divided by 5.

There are many ways to reduce the whitespace between Job Role and Company Name:

  • You could reduce the height of the first row, by replacing it with e.g. grid-template-rows: 1em repeat(4, 1fr);

  • You could keep equal row height and move Job Role within its container with e.g. position: absolute; bottom: 0;, or padding-top: 1em;

  • You could place Company Name in the same container as Job Role by wrapping <p class="jobrole">Job Role</p><p class="company">Company Name</p> in a new div

Upvotes: 1

Rok Benko
Rok Benko

Reputation: 23128

Change grid-template-rows: repeat(5, 1fr); to grid-template-rows: repeat(1, 1fr);.

See the snippet below.

.experience-child {
  display: grid;
  grid-template-columns: 2fr 6fr;
  grid-template-rows: repeat(1, 1fr);
  margin-bottom: 6em;
  font-family: 'Alumni Sans', sans-serif;
  background-color: gold;
}

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

p {
  margin: 0;
}
<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>

Upvotes: 1

Related Questions