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>