我遵循 CSS 网格指南来制作响应式卡片网格,但该网格仅在页面上垂直显示卡片,并且不会水平扩展以匹配浏览器的宽度。
任何帮助都将不胜感激~!
在这里查看代码笔: https://codepen.io/synapse709/pen/aLdbPP
.card_wrapper {
display: grid;
padding: 30px 28px;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-gap: 60px;
align-items: stretch;
}
.site_card {
display: grid;
background-color: grey;
border-radius: 4px;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.10);
width: auto;
max-width: 340px;
height: 340px;
}
<div class="card_wrapper">
<div class="site_card"></div>
<div class="site_card"></div>
<div class="site_card"></div>
</div>
最佳答案
您在网格项上设置了 max-width
- 删除它即可正常工作:
.card_wrapper {
display: grid;
padding: 30px 28px;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-gap: 60px;
align-items: stretch;
}
.site_card {
display: grid;
background-color: grey;
border-radius: 4px;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
width: auto;
/*max-width: 340px;*/
height: 340px;
}
.site_card .card__site_preview {
position: fixed;
top: 0;
height: 260px;
width: auto;
}
.site_card .card__site_preview .card__title {
color: black;
font-size: 16px;
padding: 10px 20px 15px;
text-align: left;
}
.site_card .card__site_preview .card__title .card__subtext {
color: light-grey;
padding: 10px 20px 15px;
text-align: left;
}
<div class="card_wrapper">
<div class="site_card"></div>
<div class="site_card"></div>
<div class="site_card"></div>
</div>
关于html - css 网格响应卡不水平扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46279073/