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（自动填充，minmax（340px，1fr））; grid-gap：60px; align-items：stretch;}。site_card {display：grid;背景颜色：灰色; border-radius：4px; box-shadow：0 2px 2px 1px rgba（0，0，0，0.10）;宽度：自动; 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（自动填充，minmax（340px，1fr））; grid-gap：60px; align-items：stretch;}。site_card {display：grid;背景颜色：灰色; border-radius：4px; box-shadow：0 2px 2px 1px rgba（0，0，0，0.1）;宽度：自动; / * max-width：340px; * / height：340px;}。site_card .card__site_preview {position：fixed; top：0;身高：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>

I've followed the CSS grid guidelines for making a responsive card grid, but the grid only displays cards vertically on the page and doesn't expand horizontally to match the browser's width.

Any help would really be appreciated~!

Check out the code pen here: 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>

解决方案

You have max-width set on your grid items - remove that and it works good:

.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网格响应卡不会水平扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！