3

I'm trying to remove this empty space between the first and the second row because it is ugly but the height of the row is auto-generated by the longest element in the row. How can I fix it ?

I've tries everything related which I found here in the stackoverflow but still no fix for my issue.

I expect the empty space to be removed.

section {
  display: grid;
  height: 400px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  /* <- the magic trick ! */
  grid-template-areas: "one top" "one bottom";
  align-items: start;
}

article {
  border: 1px solid green;
  padding: 0.5em;
}

#one {
  grid-area: one;
}

#top {
  grid-area: auto;
}

#bottom {
  grid-area: bottom;
}

#other {
  grid-area: top right;
}
<section>
  <article id=one>
    <h1>One</h1>
    <p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin'
      tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus blacits fo rizzle at lectus pretizzle faucibizzle. We gonna chung nec lacizzle own yo' fizzle pizzle ultricizzle. Ut nisl. Crunk
      et owned. Integer laoreet ipsum shizzlin dizzle mi. Donizzle at shiz.</p>
  </article>

  <article id=top>
    <h1>Top</h1>
    <p>Just Two Words</p>
  </article>
  <article id=other>
    <h1>other</h1>
    <p>Just Two Words</p>
    <p>Just Two Words</p>
    <p>Just Two Words</p>
  </article>

  <article id=bottom>
    <h1>Bottom</h1>
    <p>Help Me! How can I get closer to my Top neighbour?</p>
  </article>

</section>
double-beep
  • 5,031
  • 17
  • 33
  • 41
Sand3
  • 31
  • 3
  • 1
    to imbricate cell of differents heights or widths, they need to span a few column or rows, else , they stick to the grid. try this : `#other { grid-area: top right;grid-row:auto /span 2 }` and rethink your grid template ;) https://codepen.io/anon/pen/gyWdmd You should add your code here into a snippet – G-Cyrillus Apr 11 '19 at 13:53
  • This is the new link to codepen: https://codepen.io/sashkooooy/pen/PgmyKq – Sand3 Apr 11 '19 at 14:44
  • I solved the problem. I had to add "grid-row: span 1/2" depending on how much rows I want from the element to span to each of the elements (except the last element) in the container. Also Codepen is updated. – Sand3 Apr 12 '19 at 07:07

0 Answers0