CODEWITHSUNDEEP
htmlcsscss-grid
Mark Kvetny
Mark Kvetny

Reputation: 674

Make grid-rows take up minimum space

So I'm pretty new to grid layout and I was stuck at the following problem.

What I got so far is this: codepen

And here's the relevant grid part:

grid-template:
  'img date'
  'img head'
  'img sub'
  'desc desc';
grid-template-rows: auto auto 1fr 1fr;

Now my problem is that the date, head and sub all take up equal space, but what I want is for date and head to take up the minimum available space, i.e. "stick to the top". I managed to do that by giving the first two rows fixed heights like so

grid-template-rows: 30px 50px auto auto

but that seems like an ugly solution, especially because the heading is of variable length. I also tried

grid-template-rows: auto auto 1fr 1fr

but that leaves me with some ugly white-space between the subtitle and the description.

So... what's the "grid way" of achieving my goal?

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  /* grid-template-rows: auto auto 1fr 1fr; */
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}
<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Upvotes: 2

Views: 357

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372194

Note the differences between the following three variations.

1. grid-template-rows: auto auto auto auto

This set-up creates four explicit rows that adjust to the height of their content. The fourth row is based on the height of the text. The first, second and third rows are based on the height of the image that is spanning across all three rows. The auto value distributes space equally among the three rows. (See sections 7.2, 11.3 and 11.8 in the grid spec.)

enter image description here

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto auto auto; /* relevant code */
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}
<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

2. grid-template-rows: auto auto 1fr 1fr

You wrote:

"...but that leaves me with some ugly white-space between the subtitle and the description."

That's because when you apply the fr to multiple tracks, the entire space in the container is considered, and the free space is distributed equally among those tracks. In this case, the last two rows get an equal share of the free space. The image (which is not a factor in the track sizing calculation) ends up far above the final row.

enter image description here

More details here: The difference between percentage and fr units in CSS Grid Layout

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto 1fr 1fr;
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}
<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

3. grid-template-rows: auto auto 1fr auto

In this case you're setting all rows to content-height (auto), except the third row (subtitle). By setting this row to 1fr you are telling it to consume all free space in the container. That pins the first two rows to the top and the last row to the bottom. I think this is the solution you want.

enter image description here

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto 1fr auto;
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}
<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

revised codepen

Upvotes: 3

Related Questions