html - 使行高适应 CSS 网格中的动态内容

Question

我有这个代码

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>

一切看起来都很好，直到标题字母较少

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>

您可以看到第一行和第二行之间有很大的空间，即使设置 minmax grid-template-rows:minmax(min-content,45px) 1fr 18px; 我不这样做也会发生这种情况不知道可能出了什么问题，因为设置 1fr 应该根据可用内容调整大小，但看起来 minmax(min-content,45px) 根本没有移动。我希望调整内容大小以免看到那么大的空间

Answer 1

我认为问题是在考虑最大基础尺寸之后应用 1fr。

换句话说，track sizing algorithm查看第 1 行的最大 45 像素和第 3 行的 18 像素，然后将它们相加。剩余的内容 (340px - 63px) 均由第 2 行 1fr 消耗。

您可以通过采取不同的方法来解决该问题:

• 忘记minmax()
• 将行设置为自动(基于内容的高度)
• 控制网格项的最大高度
• 将元素设置为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>

这是另一个可能的解决方法:

• 忘记minmax()
• 将顶行和底行设置为min-content
• 将容器设置为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>