css网格响应卡没有水平扩展

Question

我遵循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>

Answer 1

你有你的电网项目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>