我面臨一個問題，即擴展（添加更多內容以使其拉伸）網格中的一個項目會擴展所有其他項目，即使其他項目沒有額外的內容需要它們伸展，在下面留下額外的空白空間。這就是我設置網格的方式：.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 關注
- 111 瀏覽
添加回答
舉報
0/150
提交
取消