title: Grid overflowing onto div below
body: <p>I am creating a personal website to show off my other work and thought it wanted to build the site from scratch myself to learn a skill. I ave finished a "portfolio section" that is using <code>display: grid</code> to create multiple tiles to each represent a project I have worked on. It works great and does exactly what I would like it to do. I am now creating a contact section but the portfolio area is overlapping the new contact div I have created and am unsure as to why. Any help is appreciated. </p>
  
  <p>Photo of issue (the lines going through protfolio tiles should say contact and be placed below the portfolio. I set the contact min-height to 800px and only 150-200 is shown as it starts at the beginning of the portfolio section as well.<a href="https://i.stack.imgur.com/5DOTf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5DOTf.jpg" alt="Site visual"></a></p>
  
  <p>I also have modal containers that are set to hidden until a button is clicked that is below the final contact code but it doesnt seem to be the issue so I did not post.</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// ----------------------Portfolio Tile Styles----------------------//
  
  .portfolio{
    width: 100%;
    background-color: rgb(245,245,245); 
  }
  
  //Styles for the portfolio buttons
  .btn-container{
    margin-top:50px;
    background-color: rgb(245,245,245); 
    text-align: center;
    
  
  }
  
  //Styles to set all portfolio tiles to be initally hidden;
    .photogrammetry, .cv, .dev{
      display: none;
    }
    
  
  .filter-btn{
    padding: 5px 20px;
    margin:10px 5px;
    border: 2px solid #e31b6d;
    color: #e31b6d;
    cursor: pointer;
    letter-spacing: 1px;
    background-color: white;
    text-transform: uppercase;
    transition:transform .3s;
    transition: color .3s;
    transition: background-color .3s;
  }
  
  .filter-btn:hover{
    color:white;
    background-color: #e31b6d;
  }
  
  .gallery-wrapper{
    position: absolute;
    width:100%;
    display: flex;
    background-color: rgb(245,245,245); 
  }
  
  // Portfolio Gallery Styles
  .gallery{
    position: relative;
    width: 100%;
    padding: 0 7%;
    overflow: hidden;
    margin: 0% 5% 2% 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  
  }
  
  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
  }
  
  .card{
    overflow: hidden;  
    align-items: center;
    width: auto;
    height: 250px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-size: cover;
  
  
  
  }
  
  
  .top-text{
    text-align: center;
    transform:translateY(-100px);
    transition:transform .3s;
  }
  
  .card-btn,{
    width:50%;
    padding: 5px;
    text-transform: uppercase;;
    letter-spacing: 1px;
    background: transparent;
    color: #e31b6d;
    opacity: 1;
    border: 2px solid #e31b6d;
    outline: none;
    cursor: pointer;
    transform:translateY(100px);
    transition:transform .3s;
    transition: color .3s;
    transition: background-color .3s;
  }
  
  
  
  .card:hover{
     .card-btn{
      transform: translateY(0px);
    }
  
    .top-text{
    transform:translateY(0px);
    }
  }
  
  .card-btn:hover{
      color:white;
      background-color: #e31b6d;
    }
  
  //Tile Backgrounds
  .AutoFP {
      background: url("../images/portfolioTile/AFP_Tile.png") center no-repeat; 
      background-size: cover;
    }
  .fpl-1 {
      background: url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat; 
      background-size: cover;
    }
  
  .fpl-2 {
      background: url("../images/portfolioTile/IS_Tile.jpg") center no-repeat; 
      background-size: cover;
  
    }
  
  .fpl-3 {
    background: url("../images/portfolioTile/Algae_Tile.png") center no-repeat;  
    background-size: cover;
  }
  .fpl-4 {
    background: url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;  
    background-size: cover;
  
  }
  .fpl-5 {
    background: url("../images/portfolioTile/UCW_Tile.png") center no-repeat;  
    background-size: cover;
  }
  .fpl-6 {
  
    background: url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;  
    background-size: 100%;
    background-color: white;
  }
  .fpl-7 {
    background: url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;  
    background-size: contain;
    background-color: white;
  }
  
  //Faded Tile Background
  .AutoFP:hover{
      background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.png") center no-repeat;
      background-size: cover;
  }
  .fpl-1:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat; 
    background-size: cover;
  }
  
  .fpl-2:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/IS_Tile.jpg") center no-repeat; 
    background-size: cover;
  }
  
  .fpl-3:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Algae_Tile.png") center no-repeat;  
    background-size: cover;
  } 
  .fpl-4:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;  
    background-size: cover;
  }
  .fpl-5:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/UCW_Tile.png") center no-repeat;  
    background-size: cover;
  }
  .fpl-6:hover {
  
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;  
    background-size: 100%;
    background-color: rgba(255,255,255,0.7);
  }
  .fpl-7:hover {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;  
    background-size: contain;
    background-color: rgba(255,255,255,0.7);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!---------------------- Portfolio Gallery ----------------------&gt;
   &lt;!-- Where the tiles will go shocasing work --&gt;
   &lt;div class="portfolio" id="portfolio"&gt;
    &lt;h1&gt;Projects&lt;/h1&gt;
    &lt;div class = "btn-container"&gt;
     &lt;button class="btn active filter-btn" onclick="filterSelection('all')"&gt;All&lt;/button&gt;
     &lt;button class="btn filter-btn" onclick="filterSelection('photogrammetry')"&gt;Photogrammetry&lt;/button&gt;
     &lt;button class="btn filter-btn" onclick="filterSelection('cv')"&gt;Computer Vision&lt;/button&gt;
     &lt;button class="btn filter-btn" onclick="filterSelection('dev')"&gt;Developer&lt;/button&gt;
  
    &lt;/div&gt;
  
    &lt;div class = "gallery-wrapper"&gt;
     
     &lt;div class = "gallery"&gt;
      &lt;!-- Tile 1 --&gt;
      &lt;div class = "photogrammetry dev filterDiv"&gt;
       &lt;div class = "AutoFP card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Automated FlightPlanning&lt;/h3&gt;
         &lt;span&gt;Electron, Python&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="AutoFP"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 2 --&gt;
      &lt;div class = "dev cv filterDiv"&gt;
       &lt;div class = "fpl-1 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Change Detection&lt;/h3&gt;
         &lt;span&gt;OpenCV, Python&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="cd"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 3 --&gt;
      &lt;div class = "dev cv filterDiv"&gt;
       &lt;div class = "fpl-2 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Image Stitching&lt;/h3&gt;
         &lt;span&gt;C++, OpenCV&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="imgStitch"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 4 --&gt;
      &lt;div class = "dev cv filterDiv"&gt;
       &lt;div class = "fpl-3 card " &gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Algae Detection&lt;/h3&gt;
         &lt;span&gt;OpenCV, Python&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="AlgDec"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 5 --&gt;
      &lt;div class = "photogrammetry filterDiv"&gt;
       &lt;div class = "fpl-4 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Aerial 3D Model&lt;/h3&gt;
         &lt;span&gt;DJIFlightPlanner, MetaShape  &lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="A3DM"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 6 --&gt;
      &lt;div class = "dev filterDiv"&gt;
       &lt;div class = "fpl-5 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;University Course Website&lt;/h3&gt;
         &lt;span&gt;HTML, CSS&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="UCW"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 7 --&gt;
      &lt;div class = "photogrammetry filterDiv"&gt;
       &lt;div class = "fpl-6 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;University Course Website&lt;/h3&gt;
         &lt;span&gt;Research Paper&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="RP"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Tile 8 --&gt;
      &lt;div class = "photogrammetry filterDiv"&gt;
       &lt;div class = "fpl-7 card "&gt;
        &lt;div class ="top-text"&gt;
         &lt;h3 class = "card-heading"&gt;Camera Calibration of "Prosumer" drones&lt;/h3&gt;
         &lt;span&gt;Journal Article&lt;/span&gt;
        &lt;/div&gt;
        &lt;button class="card-btn" id ="JA"&gt;Learn More&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
  
   &lt;!---------------------- Contact Page ----------------------&gt;
   &lt;div&gt;
    &lt;div class = contact-wrapper&gt;
     &lt;h1&gt;CONTACT&lt;/h1&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>