使行高适应 CSS 网格中的动态内容
Make row height adjust to dynamic content in CSS Grid
我有这个代码
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>
你可以看到第一行和第二行之间的大 space,即使设置 minmax grid-template-rows:minmax(min-content,45px) 1fr 18px;
也会发生这种情况我不知道可能是什么错误,因为设置 1fr
应该根据可用内容调整大小,但看起来 minmax(min-content,45px)
根本没有移动。我想调整内容大小,以免看到那么大 space
您似乎不太了解 minmax() 的工作原理,它与特定行无关,尽管它根据网格的高度定义了该行的高度。
现在,如果网格 space 支持您定义的 45px,那么 h4 将始终为 45px 高度,因此较少的文本将导致空白 space,如果网格不能'如果不支持那么多的高度,那么 h4 将在它的内容高度(最小内容)和 45px 之间调整大小,如果你将网格的高度设置为 0,你会看到 h4 保持它自己的内容高度。
我建议您删除 minmax() 并改用 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: 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>
或者我们的 minmax(),最大值和最小值都等于最小值。
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>
我认为问题在于 1fr
应用 在 考虑了最大碱基大小后。
换句话说,track sizing algorithm 在第 1 行看到最大 45px,在第 3 行看到最大 18px,然后将它们相加。剩下的 (340px - 63px) 被第 2 行用 1fr
.
消耗掉
您可以通过采用不同的方法来解决这个问题:
- 忘记了
minmax()
- 将行设置为
auto
(基于内容的高度)
- 控制网格项目的最大高度
- 将项目设置为
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>
我有这个代码
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>
你可以看到第一行和第二行之间的大 space,即使设置 minmax grid-template-rows:minmax(min-content,45px) 1fr 18px;
也会发生这种情况我不知道可能是什么错误,因为设置 1fr
应该根据可用内容调整大小,但看起来 minmax(min-content,45px)
根本没有移动。我想调整内容大小,以免看到那么大 space
您似乎不太了解 minmax() 的工作原理,它与特定行无关,尽管它根据网格的高度定义了该行的高度。
现在,如果网格 space 支持您定义的 45px,那么 h4 将始终为 45px 高度,因此较少的文本将导致空白 space,如果网格不能'如果不支持那么多的高度,那么 h4 将在它的内容高度(最小内容)和 45px 之间调整大小,如果你将网格的高度设置为 0,你会看到 h4 保持它自己的内容高度。
我建议您删除 minmax() 并改用 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: 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>
或者我们的 minmax(),最大值和最小值都等于最小值。
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>
我认为问题在于 1fr
应用 在 考虑了最大碱基大小后。
换句话说,track sizing algorithm 在第 1 行看到最大 45px,在第 3 行看到最大 18px,然后将它们相加。剩下的 (340px - 63px) 被第 2 行用 1fr
.
您可以通过采用不同的方法来解决这个问题:
- 忘记了
minmax()
- 将行设置为
auto
(基于内容的高度) - 控制网格项目的最大高度
- 将项目设置为
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>