在CSS Grid中将行高调整为动态内容

时间：2018-06-02 04:26:00

标签： html css css3 css-grid minmax

我有这段代码

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在标题字母较少之前，一切看起来都很好

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

你可以看到第一行和第二行之间的大空间，即使设置minmax grid-template-rows:minmax(min-content,45px) 1fr 18px;我也不知道可能出现什么问题，因为设置1fr应调整大小内容可用，但看起来minmax(min-content,45px)根本没有移动。我希望内容调整大小以便不要看到那么大的空间

2 个答案:

答案 0 :(得分：0)

你似乎没有很好地理解minmax（）是如何工作的，它不是关于那个特定的行，尽管它根据网格的高度定义了该行的高度。

现在，如果网格有空间支持您定义的45px那么h4将始终为45px高度，因此较少的文本将导致空白空间，并且如果网格不能支持那么高的高度，那么h4将在其内容高度（最小内容）和45px之间调整大小，如果您将网格的高度设置为0，您将看到h4保持其内容高度。< / p>

我建议您删除minmax（）并使用auto。

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或者我们minmax（），其中max和min都等于min-content。

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

换句话说，track sizing algorithm在第1行看到最大45px，在第3行看到18px，然后将它们相加。第2行使用1fr消耗剩余的（340px - 63px）。

您可以采用不同的方法解决问题：

  • 忘记minmax()
  • 将行设置为auto（基于内容的高度）
  • 控制网格项目的最大高度
  • 将项目设置为overflow: hidden

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这是另一个潜在的解决方法：

  • 忘记minmax()
  • 将顶行和底行设置为min-content
  • 将容器设置为overflow: auto

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题