当大量文本后没有更多文本时，如何摆脱网格中的多余空间？

Question

This is the grid code I have (originally a flexbox, then I decided grid worked better for my project's template for specific parts), generated from grid.layoutit.com and modified slightly:

 body { font-family: Tahoma, sans-serif; } .container { display: grid; grid-template-columns: 0.9fr 1.3fr 0.9fr; grid-template-rows: 0.2fr 0.5fr 0.5fr auto; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "vehicle-image vehicle-name vehicle-price" "vehicle-image vehicle-description vehicle-description"; margin-bottom: 20px; } .vehicle-image { grid-area: vehicle-image; } .vehicle-name { grid-area: vehicle-name; } .vehicle-price { grid-area: vehicle-price; } .vehicle-description { grid-area: vehicle-description; } .container { border: 2px solid; } .vehicle-description { margin-top: -20px; font-size: 0.85em; } .vehicle-image img { max-height: 260px; } .vehicle-price { text-align: center; }

 <div class="container"> <div class="vehicle-image"></div> <div class="vehicle-name"></div> <div class="vehicle-price"></div> <div class="vehicle-description"></div> </div> <div class="container"> <div class="vehicle-image"><img src="https://www.dealermanager.co.uk/images/201702/large/DM7091-xbvbirte.JPG"></div> <div class="vehicle-name"><h3>SWIFT CHALLENGER LUX 2006</h3></div> <div class="vehicle-price"><h3>£8,855</h3></div> <div class="vehicle-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis metus ut ex semper auctor. Pellentesque sollicitudin vitae arcu id tempus. Vestibulum dapibus iaculis eros, ut aliquet dolor facilisis et. Vestibulum luctus auctor magna in viverra. Suspendisse potenti. Pellentesque sollicitudin dapibus risus non tincidunt. Duis sit amet turpis elementum, placerat leo non, placerat odio. Sed fermentum quam sed maximus bibendum. Cras fermentum sapien sem, vel cursus nisi consequat vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec commodo iaculis tincidunt. Quisque et elit ut augue maximus semper. Morbi commodo ut neque eget facilisis. Donec congue lectus nec tortor aliquam, id dapibus mauris sodales. Nam at nisl mattis, iaculis turpis ac, luctus magna. Vivamus ligula ex, porta id elementum ac, molestie vehicula sapien. Morbi nisi mauris, vestibulum vel nulla vel, rutrum rhoncus est. Aliquam eget lectus sed justo ultrices sollicitudin nec ac dolor. Curabitur imperdiet euismod nulla, et luctus lorem fermentum at. Duis mattis consectetur lorem ornare accumsan. Phasellus a tellus dui. Fusce porta pharetra dapibus. Donec et libero tellus. Morbi laoreet lorem facilisis est semper, eu interdum purus vehicula. Pellentesque congue posuere risus. Donec dictum magna eu augue tristique fringilla. Mauris dictum egestas ex, id efficitur nisl ullamcorper sed. Donec congue arcu non libero ornare, commodo molestie felis fermentum. Etiam laoreet sapien id sagittis porttitor. Phasellus ac est ac ligula luctus ultrices. Quisque sodales tincidunt ex nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pulvinar, nibh sed tempor efficitur, massa tortor aliquam velit, non tincidunt magna purus eu enim. In tristique pharetra metus, sit amet tincidunt tellus gravida eget. Etiam non lobortis odio. Nunc congue eros ipsum. Praesent a tortor id augue sodales congue. Proin posuere tempus tempor. Sed commodo convallis viverra. Nunc volutpat cursus tortor vel dignissim. Cras est mi, gravida non libero in, cursus hendrerit magna. 5 berth, good conditoon</div> </div> <div class="container"> <div class="vehicle-image"><img src="https://www.dealermanager.co.uk/images/201702/large/DM7091-xbvbirte.JPG"></div> <div class="vehicle-name"><h3>SWIFT CHALLENGER LUX 2006</h3></div> <div class="vehicle-price"><h3>£8,855</h3></div> <div class="vehicle-description">5 berth, good conditoon</div> </div>

This is the error I have:

There's a large excess of space which I don't know how to fix.

I've tried grid-template-rows but that wasn't the fix.

  grid-template-rows: 0.2fr 0.5fr 0.5fr auto;

was modified to add auto at the end.

How can I fix it so that there's not a huge excess of whitespace for long paragraphs when using grid layout?

Answer 1

**

 grid-template-rows: 0.2fr 0.5fr 0.5fr min-content;

Try this instead** grid-template-rows: 0.2fr 0.5fr 0.5fr min-content;