JMRKER Posted October 3, 2020 Share Posted October 3, 2020 The only intended difference between the grid displays in the following are the use of DIV versus PRE tags. I don't understand why there is a large vertical gap between the displays. Not a major problem, just would like to know why the difference or where it is coming from. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/> <title>css Simple Grid compare</title> <!-- From: https://medium.com/better-programming/make-a-responsive-grid-with-only-3-lines-of-css-5e2f3837ccc see also: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ see also: https://gridbyexample.com/examples/example37/ see also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout --> <style> .grid { display: grid; /* auto-fill is the same */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 4px; } .Ditem { border: 1px solid blue; } .Pitem { border: 1px solid blue; white-space: pre-wrap; } </style> </head><body> <h2>Grid - DIV</h2> <div class="grid"> <div class="Ditem">Product 1 <br> This contains a longer number of words within the item. </div> <div class="Ditem">Product 2</div> <div class="Ditem">Product 3</div> <div class="Ditem">Product 4</div> <div class="Ditem">Product 5</div> <div class="Ditem">Product 6</div> <div class="Ditem">Product 7 - no vertical gap!</div> </div> <h2>Grid - PRE</h2> <div class="grid"> <pre class="Pitem">Product A <br> This contains a longer number of words within the item. </pre> <pre class="Pitem">Product B</pre> <pre class="Pitem">Product C</pre> <pre class="Pitem">Product D</pre> <pre class="Ditem">Product E</pre> <pre class="Ditem">Product F</pre> <pre class="Pitem">Product G - why such a large vertical gap?</pre> </div> </body></html> Link to comment Share on other sites More sharing options...
JMRKER Posted October 5, 2020 Author Share Posted October 5, 2020 (edited) Another site solved my query. See: https://www.webdeveloper.com/d/391499-vertical-gap-between-div-vs-pre-using-css-grid-why Turns out I needed to override a default setting I had no idea existed. Add to <style> section the following: .grid pre { margin: 0; } Edited October 5, 2020 by JMRKER Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now