# Footer disappeared below my 2 cards grid section

**URL:** https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033
**Category:** Beginners
**Created:** [December 13, 2021, 9:14pm UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033 "2021-12-13T21:14:49Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [December 13, 2021, 9:14pm UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/1 "2021-12-13T21:14:49Z")

</div>

My “footer” disappeared below my “2 cards grid”  
“2 cards grid section”:  
`<div class="col sponsor" style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px;grid-template-areas:'sponsor sponsor';">`

“footer section”:  
`<section class="bg-primary py-5 text-white"> <div class="container py-3"> <div class="align-items-center row"> `  
Help please

Also should I add box-sizing to universal css, possibly in html or body css?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [December 13, 2021, 10:35pm UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/2 "2021-12-13T22:35:42Z")

</div>

Hi @kat,  
It is really impossible to answer this without seeing the rest of the page. What do you mean by disappeared? What is the relationship between the two pieces of code? Is the cards section not supposed to have a closing div?  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [December 14, 2021, 12:21am UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/3 "2021-12-14T00:21:47Z")

</div>

Everything was fine, then I started tweaking. Sponsor section is on top of grey  
Footer section which only shows a bit of grey below the Sponsor section

```auto
       <!-- Sponsor -->
        <div class="col sponsor" style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px;grid-template-areas:'sponsor sponsor';">
            <div class="card mb-4 shadow-sm">
                <div class="card-header">
                    <h4 class="my-0 fw-normal">Sponsor a Wolf</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$5 <small class="text-muted">/ mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>Food</li>
                        <li>Medical care</li>
                        <li>Housing</li>
                    </ul>
                    <button type="button" class="w-100 btn btn-lg btn-primary">Fund Now</button>
                </div>
            </div>
            <div class="card mb-4 shadow-sm">
                <div class="card-header">
                    <h4 class="my-0 fw-normal">Sponsor the Pack</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$15&nbsp;<small class="text-muted">/ mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>Food</li>
                        <li>Medical care</li>
                        <li>Housing</li>
                    </ul>
                    <button type="button" class="w-100 btn btn-lg btn-primary">Start now</button>
                </div>
            </div>
        </div>
         <!-- End of Sponsor -->

        <!-- Footer -->
        <section class="bg-primary py-5 text-white"> 
            <div class="container py-3"> 
                <div class="align-items-center row"> 
                    <div class="col-lg-7"> 
                        <h2 class="mb-3">Join Our Amazing Community</h2>
                        <p class="fw-light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 
                    </div>                     
                    <div class="col-lg-auto ms-auto"> <a class="btn btn-outline-light ps-4 pe-4 rounded-pill" href="#">Register Now</a> 
                    </div>                     
                </div>                 
            </div>             
        </section>
        <!-- End of Footer -->

```

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [December 14, 2021, 10:30am UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/4 "2021-12-14T10:30:05Z")

</div>

Hi @kat,  
I’m not fully sure what you are trying to achieve with the grid. However, I _think_ that is your problem. You are splitting the width of the viewport into two columns using `grid-template-columns: 1fr 1fr;` But then you use `grid-template-rows:100px;`. That means that anything after 100px in height is overflow. Your next section, the footer, will start where the sponsor div ends - at 100px. The rest of the card content overflows the 100px on top of the footer. Make sense? Instead of “100px” you should use “auto” for the rows.

As an aside, you are also naming your columns - not sure why since you don’t use that name again - maybe it is elsewhere in the code.  
Hope this helps,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [December 14, 2021, 2:46pm UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/5 "2021-12-14T14:46:49Z")

</div>

> [@RobM](#):
>
> Instead of “100px” you should use “auto” for the rows.

Perfect!  
I’m thinking it might be simpler to not use frameworks now that PG has html 5 templates. Thoughts?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [December 14, 2021, 7:12pm UTC](https://forum.pinegrow.com/t/footer-disappeared-below-my-2-cards-grid-section/6033/6 "2021-12-14T19:12:12Z")

</div>

Hi @kat,  
Personally, I’m not a fan of frameworks. However, I can see how they make putting a lot of aspects of a page together a little more quickly. For better or worse, this might make pages look a little more “cookie cutter”. In my case, my eye for design is well and truly shite, so maybe I should use frameworks a bit more! 😁  
Cheers,  
Bob