How can I make the blog grid work on Chrome? - html

Question

This blog list formatting is not working in chrome. It looks fine in Safari (although it wont stack) but I don't know what I'm doing wrong with Chrome. I have attached an image of the blog list in my chrome browser. I have added more css for reference. Please let me know if you can help! Much appreaciated!
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/why-asheville-is-the-best-place-to-retire-and-become-the-artist-you-always-wanted-to-be/">
<img src="https://bluestoneconstruction.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-10-1030x579.jpg" alt="">
<h3>Asheville NC Is The Best Place to Retire—And Become the Artist You Always Wanted to Be</h3>
</a>
<p>Retirement is about getting to play, grow, and explore parts of yourself that you were too busy or preoccupied to fully enjoy previously. It’s about having free hours to learn new skills and fully immerse yourself in those “night and weekend” hobbies that are no longer relegated to nights and weekends. For many of us,</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/now-is-the-time-to-build-the-custom-home-you-want-to-live-work-play-in/">
<img src="https://bluestoneconstruction.com/wp-content/uploads/2020/04/Best-Greenville-luxury-home-builder-1.jpg" alt="">
<h3>Now Is The Time To Build The Custom Home You Want To Live, Work & Play In</h3>
</a>
<p>Spending most of your time at home clarifies what works and what doesn’t about your space. We’re all stuck at home, which means that aspects of our space that seemed like mild annoyances a few weeks ago now feel like major inconveniences. Maybe your kitchen felt small when you were eating out multiple times a</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/kevin-reed-on-home-construction-during-coronavirus-via-houzz/">
<img width="1009" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1009x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1009x690.jpg 1009w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-300x205.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-1024x700.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1-768x525.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/03/why-bluestone-construction-is-the-best-custom-builder-in-Asheville-nc-6-1-1500x1026-1.jpg 1500w" sizes="(max-width: 1009px) 100vw, 1009px">
<h3>Kevin Reed on Home Construction During Coronavirus, via Houzz</h3>
</a>
<p>Bluestone founder Kevin Reed was recently featured on Houzz, in an article about how the novel coronavirus is affecting the home building industry and the extra hygiene precautions his teams are taking. Read the entire story here.</p>
</li>
</ul>
.blog-list {
padding: 0 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blog-list li {
padding-bottom: 20px;
}
.blog-list a {
position: relative;
text-decoration: none;
height: 400px;
}
.blog-list h3 {
padding: 20px 0 10px;
font-size: 1.9rem;
font-family: 'Playfair Display', Arial, serif;
color: #c9aa70;
line-height: 1;
}
.blog-list p {
padding-bottom: 1em;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}

Answer 1

the display: grid; css style tag is actually supported on all browser as per the can i use https://caniuse.com/css-grid. I would suggest you take a look at some article about the use of css, that one for example grid https://css-tricks.com/snippets/css/complete-guide-grid/.
If you don't want to bothered yourself with it you can always use a css framework like https://getbootstrap.com/ which has already a pre made built in grid system and is verry friendly to learn. Regards

Answer 2

So reviewing your code, it looks like you specified display: grid and grid-template-columns but forgot to specify which items go into which column in the child elements.
Here is a working jsfiddle that shows it working (yes, I tested in chrome) with some quick style changes to make it look readable: https://jsfiddle.net/tjaLuc7r/29/
I simply added this to the css to make it work:
ul:first-child {
grid-column-start: 1;
}
ul:nth-child(n+1) {
grid-column-start: 2;
}
ul:last-child {
grid-column-start: 3
}
There is great documentation for grids and all things css here: https://css-tricks.com/snippets/css/complete-guide-grid/