Responsive CSS grid images are overlapping
I’ve got a tarot card application that displays the back of a set of cards, then when you click on the card, which is a button the card flips over. The main issue I have is a set it up with a set of images for the front and back ~200×276. The CSS I have seems fine other than some minor alignment when the card is "flipped". My major issue is that I’ve used a larger set of images and now the cards overlap. How do I setup my grid to automatically adjust for the different sizes of the card sets images? My CSS skill is beginner level.
CSS
.btn-default { border: none; background: none; display: inline-block; height: 180px; margin: 4px; padding: 0; } .btn-default:hover { background: none; } .card-oracle-cards { display: grid; grid-gap: .5rem; grid-auto-rows: auto; padding: 1rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .card-oracle-card { perspective: 300px; width: auto; height: 180px; } .card-oracle-card-body { width: 100%; height: 100%; -webkit-transition: transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } .card-oracle-card-body.is-flipped { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY( 180deg ); } .card-oracle-back, .card-oracle-front, .card-oracle-front-reverse { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; width: 100%; } .card-oracle-front, .card-oracle-front-reverse { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .card-oracle-front-reverse { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .card-oracle-back:hover { background: white; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: transform .2s; /* Animation */ } .card-oracle-img-btn { background: none; display: block; height: 100%; width: 100%; } .card-oracle-rotate-image { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } HTML
<div class="card-oracle-cards"> <div class="card-oracle-card"> <div class="card-oracle-card-body"> <div class="card-oracle-back"><button type="button" value="1359" id="id1359" data-value="1359" onclick="this.disabled = true;" class="btn btn-default clicked"><img width="155" height="300" src="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png" class="attachment-medium size-medium wp-post-image" alt="Past – Present – Future (Demo)" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png 155w, https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back.png 320w" sizes="(max-width: 155px) 100vw, 155px" /></button></div> <div class="card-oracle-front-reverse"><img width="320" height="620" src="https://cuspstudios.com/wp-content/uploads/2020/07/major01-4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="The Magician" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/major01-4.jpg 320w, https://cuspstudios.com/wp-content/uploads/2020/07/major01-4-155x300.jpg 155w" sizes="(max-width: 320px) 100vw, 320px" /></div> </div> </div> <div class="card-oracle-card"> <div class="card-oracle-card-body"> <div class="card-oracle-back"><button type="button" value="1454" id="id1454" onclick="this.disabled = true;" class="btn btn-default clicked"><img width="155" height="300" src="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png" class="attachment-medium size-medium wp-post-image" alt="Past – Present – Future (Demo)" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png 155w, https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back.png 320w" sizes="(max-width: 155px) 100vw, 155px" /></button></div> <div class="card-oracle-front"><img width="320" height="620" src="https://cuspstudios.com/wp-content/uploads/2020/07/major20-4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Judgement" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/major20-4.jpg 320w, https://cuspstudios.com/wp-content/uploads/2020/07/major20-4-155x300.jpg 155w" sizes="(max-width: 320px) 100vw, 320px" /></div> </div> </div> <div class="card-oracle-card"> <div class="card-oracle-card-body"> <div class="card-oracle-back"><button type="button" value="1404" id="id1404" onclick="this.disabled = true;" class="btn btn-default clicked"><img width="155" height="300" src="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png" class="attachment-medium size-medium wp-post-image" alt="Past – Present – Future (Demo)" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png 155w, https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back.png 320w" sizes="(max-width: 155px) 100vw, 155px" /></button></div> <div class="card-oracle-front"><img width="320" height="620" src="https://cuspstudios.com/wp-content/uploads/2020/07/major10-4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Wheel of Fortune" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/major10-4.jpg 320w, https://cuspstudios.com/wp-content/uploads/2020/07/major10-4-155x300.jpg 155w" sizes="(max-width: 320px) 100vw, 320px" /></div> </div> </div> <div class="card-oracle-card"> <div class="card-oracle-card-body"> <div class="card-oracle-back"><button type="button" value="1374" id="id1374" data-value="1374" onclick="this.disabled = true;" class="btn btn-default clicked"><img width="155" height="300" src="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png" class="attachment-medium size-medium wp-post-image" alt="Past – Present – Future (Demo)" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png 155w, https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back.png 320w" sizes="(max-width: 155px) 100vw, 155px" /></button></div> <div class="card-oracle-front-reverse"><img width="320" height="620" src="https://cuspstudios.com/wp-content/uploads/2020/07/major04-4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="The Emperor" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/major04-4.jpg 320w, https://cuspstudios.com/wp-content/uploads/2020/07/major04-4-155x300.jpg 155w" sizes="(max-width: 320px) 100vw, 320px" /></div> </div> </div> <div class="card-oracle-card"> <div class="card-oracle-card-body"> <div class="card-oracle-back"><button type="button" value="1389" id="id1389" onclick="this.disabled = true;" class="btn btn-default clicked"><img width="155" height="300" src="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png" class="attachment-medium size-medium wp-post-image" alt="Past – Present – Future (Demo)" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back-155x300.png 155w, https://cuspstudios.com/wp-content/uploads/2020/07/demo_card_back.png 320w" sizes="(max-width: 155px) 100vw, 155px" /></button></div> <div class="card-oracle-front"><img width="320" height="620" src="https://cuspstudios.com/wp-content/uploads/2020/07/major07-4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="The Chariot" srcset="https://cuspstudios.com/wp-content/uploads/2020/07/major07-4.jpg 320w, https://cuspstudios.com/wp-content/uploads/2020/07/major07-4-155x300.jpg 155w" sizes="(max-width: 320px) 100vw, 320px" /></div> </div> </div> </div> I’ve done an example on codepen, https://codepen.io/chillichalli/pen/oNbyzRN
First thing to check: "display:grid" only applies to direct children. You have divs with the class "card-oracle-cards" nested inside one another. That might be causing some problems. Try reassigning some div classes.
