I've been struggling to set up a 3-column grid with 2 rows for showcasing my projects on my portfolio. Unfortunately, they are only appearing in the first column and I can't figure out how to fix it.
Here's a visual representation of the issue: https://i.stack.imgur.com/5apnv.png
This is how I want them to appear: https://i.stack.imgur.com/2ge98.png
HTML/PHP
<div id="projects">
<div class="project-item-container">
<div class="project-item">
<?php foreach ($projects as $projectItem) {?>
<div class="project-item-img">
<img class="absolute-center" src="assets/img/<?php echo $projectItem["img"]; ?>.png" alt="<?php echo $projectItem["name"]; ?>">
</div><!-- project item img end -->
<div class="project-item-info">
<h2><?php echo $projectItem["name"]; ?></h2>
<h4><?php echo $projectItem["category"]; ?></h4>
</div><!-- project item info end -->
<?php } ?>
</div><!-- project item end -->
</div><!-- project-item container end -->
CSS
.project-item-container {
display: grid;
grid-template-columns: 400px 400px 400px;
grid-gap: 40px;
}
.project-item img {
max-width: 100%;
display: block;
}
.project-item-info {
text-align: center;
position: relative;
top: -50px;
background-color: #ffffff;
height: 100px;
padding: 10px 0;
}