我面临一个问题，即扩展（添加更多内容以使其拉伸）网格中的一个项目会扩展所有其他项目，即使其他项目没有额外的内容需要它们伸展，在下面留下额外的空白空间。这就是我设置网格的方式：.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 5px 5px; grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4"; grid-gap: 10px; border: 1px solid #fff;}.vcard { grid-area: vcard;}.vcard2 { grid-area: vcard2;}.vcard3 { grid-area: vcard3;}.vcard4 { grid-area: vcard4;}当我添加额外的文本时，div.vcard它会按预期拉伸，但即使我没有添加任何额外的内容，div.vcard3和也会自行拉伸。div.vcard4有没有办法避免这种行为？这样只有应该扩展的元素才会扩展。这是工作示例： codepen
1 回答
慕盖茨4494581
TA贡献1850条经验 获得超11个赞
通过向网格项目添加内容，您不仅可以扩展项目，还可以扩展行高。
再加上网格项默认设置为align-items: stretch，并且您的项目可以扩展网格区域的整个高度（可以包含多行）。
您可以通过设置覆盖默认值align-items: start，但它们只会缩小到项目的高度，而不会影响行高（因为它是由最高的内容设置的）。
* {
color: #fff;
text-shadow: 1px 1px 0 #000;
box-sizing: border-box;
font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}
html {
background: linear-gradient(-10deg, #C62828, #BA68C8);
min-height: 100vh;
font-size: 22px;
}
body {
padding: 50px;
code {
margin: 1px 5px;
padding: 2px 5px 1px 5px;
font-family: monospace;
border-radius: 2px;
border: 1px dotted #fff;
}
p {
margin: 25px 10px;
}
h2 {
text-align: center;
margin-top: 50px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.outlined {
height: 200px;
border: 1px solid #fff;
margin-bottom: 50px;
}
.grid>* {
color: #fff;
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid #fff;
border-radius: 2px;
padding: 20px;
/*margin: 10px;*/
text-align: center;
}
.grid a {
display: block;
}
.grid>a:hover {
background-color: rgba(255, 255, 255, 0.25);
text-decoration: none;
transition: background-color ease 0.5s;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(5, minmax(0, 1fr));
gap: 5px 5px;
grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
grid-gap: 10px;
border: 1px solid #fff;
/* NEW */
align-items: start;
}
.vcard {
grid-area: vcard;
}
.vcard2 {
grid-area: vcard2;
}
.vcard3 {
grid-area: vcard3;
}
.vcard4 {
grid-area: vcard4;
}
<html>
<head>
</head>
<body>
<div class="grid">
<div class="vcard">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos. Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
ad. Pri eu justo aeque torquatos.ec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea.
Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.
</div>
<div class="vcard2">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
ad. Pri eu justo aeque torquatos.</div>
<div class="vcard3">Grid item 3</div>
<div class="vcard4">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.</div>
</div>
</body>
</html>
看来您正在寻找的是砖石布局。
- 1 回答
- 0 关注
- 53 浏览
添加回答
举报
0/150
提交
取消