css网格响应卡不是水平扩展的

Question

我已经按照CSS网格指南制作了响应卡片网格，但网格只在页面上垂直显示卡片，并且不会水平扩展以匹配浏览器的宽度。

真的很感激任何帮助〜！

在这里查看代码笔： https://codepen.io/synapse709/pen/aLdbPP

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="card_wrapper">
  <div class="site_card"></div>
  <div class="site_card"></div>
  <div class="site_card"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您已在网格项上设置max-width - 删除它并且效果很好：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="card_wrapper">
  <div class="site_card"></div>
  <div class="site_card"></div>
  <div class="site_card"></div>
</div>

＆＃13;

＆＃13;

＆＃13;