css 网格响应卡片未水平扩展
css grid responsive cards are not expanding horizontally
我已按照 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>
我已按照 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>