css网格响应卡没有水平扩展
问题描述:
我遵循CSS网格制作响应卡网格的指导原则,但网格只在页面上垂直显示卡,并且不会水平扩展以匹配浏览器的宽度。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>
@TimTitus你能不能给出答案呢,谢谢! – kukkuz