Portfolio Webpage - Problems with the Grid-Property

[SaBu]

Hello there!

I’m on my last Web Design Project, building my Personal Portfolio Page. (Yay!)

I used CSS Grid for arranging my projects in the projects section. I’m using the grid property for the first time, so I’m a bit lost.

I’ve at least arranged my 6 project-tiles in a way that I wanted them to.
But I do wanna put some text underneath the tiles. As you can see in the screenshot below, the text is on top of the tiles.
How do I get the text below the tiles?
Do <p> elements need to be grid-items as well? Or do I use the position-property?

I appreciate any help! Thanks so much in advance!
Sarah

At the moment the project-section looks like this:

html-code:

   <section id="projects">
      <h4>Here are some of my projects:</h4>
      
      <div class="projects-grid">
        <div class="project-tile 1">
        <iframe 
                src="https://www.youtube-nocookie.com/embed/DvCP5YFl6KQ" allowfullscreen
                class="project-tile 1"
                width="560" height="315"
                frameborder="0"
                allowfullscreen
               ></iframe>
      </div>
        
        <div class="project-text">
          <p>Gaming-Review of Hades</p>
        </div>
        
        <div class="project-tile 2">
        <iframe src="https://www.youtube-nocookie.com/embed/clyUgAHREMw"
                width="560" height="315"
                frameborder="0"
                allowfullscreen></iframe>
        </div>
        
        <div class="project-text">
          <p>Show about jobs in eSports</p>
        </div>
      
        <div class="project-tile 3">
          <img src="https://www.dropbox.com/s/sakyy8co5n71cwj/For%20personal%20page.jpg?raw=1"
               alt=""
               target="_blank"
               width="560" height="315">
        </div>
        
        <div class="project-text">
          <p>Webdesign-Project of a product landing page</p>
        </div>
 
        <div class="project-tile 4">
          <img src="https://www.dropbox.com/s/mi6cj4k9ic5hg96/Preview%20Heavy%20Bullets.jpg?raw=1"
               alt=""
               width="560" height="315">
        </div>
       
      <div class="project-text">
      <p>Gaming-Preview of Heavy Bullets</p>
      </div>

        <div class="project-tile 5">
          <img src="https://www.dropbox.com/s/9z76maxauq78qg6/Parks%20in%20AC.jpg?raw=1"
               alt=""
               class="project-tile 5"
               width="560" height="315">
       </div>
        
        <div class="project-text">
        <p>Article about beautiful parcs</p>
        </div>
        
      <div class="project-tile 6">  
      <iframe class="project-tile-bundle"
              scrolling="no"
              id="hearthis_at_track_5533807"
              width="560" height="150"
              src="https://app.hearthis.at/embed/5533807/transparent_black/?hcolor=&color=&style=2&block_size=2&block_space=1&background=1&waveform=0&cover=0&autoplay=0&css="
              frameborder="0">
        <p>Listen to
          <a href="https://hearthis.at/swayyay/1live-gamescom-2020-vr-spiele-must-zock-26.8.20/"
             target="_blank">1LIVE GAMESCOM 2020 - VR-Spiele Must-Zock</a> <span>by</span><a href="https://hearthis.at/swayyay/" target="_blank" >Swayyay</a> <span>on</span> <a href="https://hearthis.at/" target="_blank">hearthis.at</a></p></iframe>  
        </div>
        
    <div class="project-text">
      <p>The best VR-Games so far</p>
    </div>

CSS-Code:

#projects {
  background: #2ECCFA;
  background: var(--nav-color, #2ECCFA);
  padding: 5px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  grid-row-gap: 150px;
  padding: 20px 0 150px 60px;
}

My whole project in CodePen:
https://codepen.io/Mauzzz/pen/QWKOXmB

[jwilkins.oboe]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[coolbluedesigns]

There are probably several ways to do this but I did this by putting my text in its own grid box underneath the image it went with. So instead of 2 row by 3 column grid you would have a 4 row by 3 column grid. I had to use some CSS to get the text centered and at the top of the grid box but it worked. Hope this helps.

[jsdisco]

Just put your .project-text divs inside the .project-tile divs like this:

<div class="project-tile 1">
          
        <iframe></iframe>
          
        <div class="project-text">
            <p>Gaming-Review of Hades</p>
        </div>
          
</div>

[SaBu]

Thanks so much you two for your replies!!!

I tried your suggestion @jsdisco first and now the text really is underneath my project - crazy!
But now my grid somehow shifted and looks like this now:

Why does that happen? What’s the best way to arrange the tiles back they were?

[jsdisco]

I think it’s because you’ve given your iframes a width of 560px. They can’t fit into your grid-template-columns: repeat(auto-fit, minmax(250px, 300px));, hence the overflow.

[SaBu]

Ah yeah, that seems to be the reason. Thank you so much!
And sorry for the late reply! (so much work this week)