我面臨一個(gè)問(wèn)題，即擴(kuò)展（添加更多內(nèi)容以使其拉伸）網(wǎng)格中的一個(gè)項(xiàng)目會(huì)擴(kuò)展所有其他項(xiàng)目，即使其他項(xiàng)目沒(méi)有額外的內(nèi)容需要它們伸展，在下面留下額外的空白空間。這就是我設(shè)置網(wǎng)格的方式：.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;}當(dāng)我添加額外的文本時(shí)，div.vcard它會(huì)按預(yù)期拉伸，但即使我沒(méi)有添加任何額外的內(nèi)容，div.vcard3和也會(huì)自行拉伸。div.vcard4有沒(méi)有辦法避免這種行為？這樣只有應(yīng)該擴(kuò)展的元素才會(huì)擴(kuò)展。這是工作示例： codepen
1 回答
慕蓋茨4494581
TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊
通過(guò)向網(wǎng)格項(xiàng)目添加內(nèi)容，您不僅可以擴(kuò)展項(xiàng)目，還可以擴(kuò)展行高。
再加上網(wǎng)格項(xiàng)默認(rèn)設(shè)置為align-items: stretch，并且您的項(xiàng)目可以擴(kuò)展網(wǎng)格區(qū)域的整個(gè)高度（可以包含多行）。
您可以通過(guò)設(shè)置覆蓋默認(rèn)值align-items: start，但它們只會(huì)縮小到項(xiàng)目的高度，而不會(huì)影響行高（因?yàn)樗怯勺罡叩膬?nèi)容設(shè)置的）。
* {
? 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>
看來(lái)您正在尋找的是磚石布局。
- 1 回答
- 0 關(guān)注
- 122 瀏覽
添加回答
舉報(bào)
0/150
提交
取消