How can I make my grid-template-rows to fit the content?

Question

I have a grid made of two elements, an image and some text.

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 50vw;
  grid-template-areas:
  "a b"
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">

      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>

      <div class="image">
      </div>

</div>

When the window gets shrunk horizontally, the text, which has a fixed font-size, automatically expands vertically, overflowing the div. How can I make the grid-template-rows expand in order to enclose the text? I already tried setting it to auto but it just follows the proportions of the image.

Levan

Answer 1

Use min-content value on the grid-template-row property:

  grid-template-rows: min-content;

This is really useful when combined with the auto value to fill up the rest of your height.

  grid-template-rows: auto;

.card {
  width: 100%;
  height:50vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto;
  grid-template-areas:
  "a";

}

.card-text1 {
  grid-area: a;
  background-color: #02B277;
}

.card-text2 {  
  background-color: cyan;
}

.card-text1 p {

  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  /*background-size: cover;
  grid-area: b; */
}

<div class="card">
  <div class="card-text1">
    <p>Lorem ipsum blablabla</p>
  </div>
  <div class="card-text2">
    <p>Lorem ipsum blablabla</p>
  </div>
  <div class="image">
  </div>
</div>

Tollefson

Answer 2

try this

.card {
     place-items: center;
}

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
  grid-template-areas:
  "a b";
  place-items: center;
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">

      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>

      <div class="image">
      </div>

</div>

Claudy

Are you expected like this ? – Claudy

This doesn't work, it just messes up the grid-template-rows property and still varies by width and not by the height of the content. – Levan

Answer 3

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
  grid-template-areas:
  "a b"
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">
  <div class="card-text">
    <p>Lorem ipsum blablabla</p>
  </div>
  <div class="image">
  </div>
</div>

Give the grids height the value auto, then the hight will adapt to the contents height.

Depose

As for the other method, this doesn't seem to override the dependency from the window width. Even removing the grid-template-rows makes it shrink and enlarge by window width. May this be an intrinsic problem of using grid? – Levan

Answer 4

I solved this by nesting the card-text div in another div, like this:

<div class="card">
    <div class="container">
      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>
    </div>

      <div class="image">
      </div>

</div>

And styling them as follows.

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
  grid-template-areas:
  "a b";

}

.container {
  grid-area: a;
  background-color: #02B277;
}

.card-text {
  margin: auto;
  width: 70%;
  padding: 5vw 0px;
}
.text p {
  top: 1vw;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  background-position: center;
  grid-area: b;
}

This works fine and also is much more useful in cases where I have also other tags that are not <p></p> in my card-text div (<h1></h1> , for example). The background-position: center; makes just sense aesthetically, it doesn't influence the layout.

Levan