在CSS Grid Row中扩展卡片

Question

我正在开发一个响应式CSS网格，其中包含1到4列，具体取决于视口大小和任意行数。每个网格框（材质样式卡）的内容都会单击以展开更多数据。当只有一列（手机大小的屏幕）时，一切都很完美，但一旦扩展到多列，我就开始看到一个我还不太了解的问题。

当我单击一张卡以展开数据时，同一行中的每张其他卡都会展开以填充整个行高。这看起来很糟糕，并不是预期的卡行为。我宁愿拥有的是没有被点击的卡片保持其原始尺寸，而只有被点击的卡片被扩展。

我首先尝试用display: flex实现这个，但我无法得到我想要的行为。如果有灵活解决方案，我愿意接受灵活解决方案。

下面是相关的HTML，CSS和jQuery。完整示例也可以在CodePen上找到：https://codepen.io/davewiard/pen/eydPoj。

var $cell = $(".card");

//open and close card when clicked on card
$cell.find(".js-expander").click(function() {
  var $thisCell = $(this).closest(".card");

  if ($thisCell.hasClass("is-collapsed")) {
    $cell
      .not($thisCell)
      .removeClass("is-expanded")
      .addClass("is-collapsed")
      .addClass("is-inactive");
    $thisCell.removeClass("is-collapsed").addClass("is-expanded");

    if ($cell.not($thisCell).hasClass("is-inactive")) {
      //do nothing
    } else {
      $cell.not($thisCell).addClass("is-inactive");
    }
  } else {
    $thisCell.removeClass("is-expanded").addClass("is-collapsed");
    $cell.not($thisCell).removeClass("is-inactive");
  }
});

//close card when click on cross
$cell.find(".js-collapser").click(function() {
  var $thisCell = $(this).closest(".card");

  $thisCell.removeClass("is-expanded").addClass("is-collapsed");
  $cell.not($thisCell).removeClass("is-inactive");
});

/*
 * site-wide styling
 */
* {
  box-sizing: border-box;
}

/*
 * header styling
 */
#title {
  font-family: "Expletus Sans", "Roboto", sans-serif;
  text-transform: uppercase;
}

/*
 * content styling
 */
hr {
  border: 0.5px solid green;
  margin: 10px 0;
}

/*
 * upper card styling
 */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: fit-content;
}

@media screen and (min-width: 700px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1050px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1400px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background-color: #e0e0e0;
  max-width: 100%;
  min-width: 300px;
  margin: 10px;
  padding: 16px;
  border-radius: 5px;
  color: #212121;
}

/*
 * lower/expanding card styling
 */
.card.is-collapsed .card--expander {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  margin-top: 0;
  opacity: 0;
}

.name {
  grid-column: 1 / span 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  
  <div class="card [ is-collapsed ]">
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div>
    <div class="card--expander [ js-collapser ]">
      <hr />
      <div class="card--expander--info--container"><span class="name">Name</span></div>
    </div>
  </div>
  
  <div class="card [ is-collapsed ]">
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div>
    <div class="card--expander [ js-collapser ]">
      <hr />
      <div class="card--expander--info--container"><span class="name">Name</span></div>
    </div>
  </div>

  <div class="card [ is-collapsed ]">
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div>
    <div class="card--expander [ js-collapser ]">
      <hr />
      <div class="card--expander--info--container"><span class="name">Name</span></div>
    </div>
  </div>

  <div class="card [ is-collapsed ]">
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div>
    <div class="card--expander [ js-collapser ]">
      <hr />
      <div class="card--expander--info--container"><span class="name">Name</span></div>
    </div>
  </div>

  <div class="card [ is-collapsed ]">
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div>
    <div class="card--expander [ js-collapser ]">
      <hr />
      <div class="card--expander--info--container"><span class="name">Name</span></div>
    </div>
  </div>
</div>

Answer 1

您可以像在flexbox上一样使用对齐设置。 flexbox和grid的默认值是stretch，这可能是意外的。

其中一个选择.container {align-items: start;}。 flex-start实际上也有效。 （我不确定所有浏览器是否支持相同的值）