我试图为我的Freecodecamp项目建立一个基本的投资组合,但我不能理解错误,为什么网格属性不起作用。
代码如下:
#projects {
padding: 3rem 2rem;
width: 100%;
height: 120%;
background-color: #3c6382;
}
#projects h2 {
text-align: Center;
text-decoration: underline;
color: #c8d6e5;
font-size: 2rem;
}
.img {
margin-top: 4rem;
width: 40%;
border: 0.5rem solid white;
}
.project-title {
color: white;
font-size: 1.5rem;
margin-left: 4rem;
}
#projects-grid {
display: grid;
grid-template-columns: repeat(autofit, minmax(320px, 1fr));
}
<section id='projects'>
<h2>Here are some of my Projects:</h2>
<div id="projects-grid">
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
<a href="">
<img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
<p class='project-title'>Tribute page</p>
</a>
</div>
</div>
</section>
这是我希望输出的格式,但它不是网格格式:
2条答案
按热度按时间dy2hfwbg1#
参考文献:
grid-template-columns
。repeat()
。<img>
。toiithl62#
CSS代码看起来是正确的,但HTML代码中的img标记中存在语法错误。不要使用
</image>
关闭标记,而使用</img>
。这是核心代码HTML