CODEWITHSUNDEEP
htmlcsscss-grid
user13884402
user13884402

Reputation:

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

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.

Upvotes: 6

Views: 8195

Answers (4)

Luhn
Luhn

Reputation: 865

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>

Upvotes: 4

user13884402
user13884402

Reputation:

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.

Upvotes: 0

tacoshy
tacoshy

Reputation: 13012

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

Upvotes: 0

Rayees AC
Rayees AC

Reputation: 4659

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>

Upvotes: 1

Related Questions