我正在尝试创建一个包含 2 行的 3 列网格,以在我的投资组合中显示我的元素,但它们似乎只填充了第一列。我试了又试,但我不知道该怎么做才能让它发挥作用。
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;
}
最佳答案
你的 CSS 需要看起来像这样......
#projects {
width: 92%;
padding: 4rem 0;
margin: 0 auto;
}
.project-item-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
grid-gap: 4rem;
}
.project-item img {
width: 400px;
max-width: 100%;
display: block;
}
.project-item-info {
padding: 1rem 0;
text-align: center;
}
关于html - 如何让我的 css 网格中的子元素工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51177652/