CSS Grid: Grid stretches the content – How is it possible to avoid that if one item uses "align-self: end;"?

Question

This is my code:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

#grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

#one,
#two,
#three {
  grid-column-start: 1;
  grid-column-end: 7;
}

#three {
  align-self: end;
}

<div id="grid">

  <div id="one">Hello</div>
  <div id="two">How are you?</div>
  <div id="three">See you.</div>

</div>

I would like to use align-self: end; for the last item. But the second item (#two) should stand directly under the first item (#one) without a gap.

How is it possible to avoid that gap? I have tried it with grid-auto-rows: min-content;, but then align-self: end; does not work anymore.

Would be very thankful for help! <3

Answer 1

You need 1fr for the middle one:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

#grid {
  height: 100%;
  display: grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns: repeat(6, 1fr);
}

#one,
#two,
#three {
  grid-column-start: 1;
  grid-column-end: 7;
}

<div id="grid">

  <div id="one">Hello</div>
  <div id="two">How are you?</div>
  <div id="three">See you.</div>

</div>