CODEWITHSUNDEEP
htmlcsscss-gridminmax
John Balvin Arias
John Balvin Arias

Reputation: 2886

Make row height adjust to dynamic content in CSS Grid

I have this code

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, 45px) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Everything looks fine until title have fewer letters 

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, 45px) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

You can see the big space between first row and the second one, this happens even if setting minmax grid-template-rows:minmax(min-content,45px) 1fr 18px; I don't know what could be wrong, because setting 1fr should resize with content available, but it looks like minmax(min-content,45px) is not moving at all. I want the content to resize in order not to see that big space

Upvotes: 2

Views: 6173

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371083

I believe the problem is that 1fr is applied after the maximum base sizes are factored in.

In other words, the track sizing algorithm sees the 45px max on row 1, and the 18px on row 3, and then adds them up. Whatever is leftover (340px - 63px) is consumed by row 2 with 1fr.

You could get around the problem by taking a different approach:

  • forget minmax()
  • set the row to auto (content-based height)
  • control the max height on the grid item
  • set the item to overflow: hidden

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: auto 1fr 18px; /* adjustment */
  grid-template-areas: "simb title title"
                     "simb subtitle subtitle"
                           ". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px;
  max-height 45px;  /* new */
  overflow: hidden; /* new */
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching
    mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Here's another potential workaround:

  • forget minmax()
  • set the top and bottom rows to min-content
  • set the container to overflow: auto

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "simb title title"
                      "simb subtitle subtitle"
                        ".      .     price";
  padding: 0;
  width: 340px;
  height: 120px;
  overflow: auto;
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px;
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center;
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
    <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
    <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Upvotes: 2

user7148391
user7148391

Reputation:

you seem to not have a good grasp on how the minmax() work, it's not about that particular row although it defines the height of that row based on grid's height.

Now if the grid had space to support 45px you defined then the h4 will always be of 45px height, therefore less text will result in empty white space, and if the grid can't support that much height then the h4 will resize betwen it's content height (min-content) and 45px, also if the you set the grid's height to 0, you will see that the h4 keeps it's own content height.

I would suggest you either remove minmax() and use auto instead.

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: auto 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Or us minmax() with both max and min equal to min-content.

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, min-content) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Upvotes: 0

Related Questions