在 CSS 网格行内扩展卡片

Question

我正在开发具有 1 到 4 列的响应式 CSS 网格，具体取决于视口大小和任意行数。每个网格框（Material 样式的卡片）的内容在单击时展开以显示更多数据。当只有 1 列（phone 大小的屏幕）时一切正常，但一旦它扩展到多列我就开始看到一个我还不太明白的问题。

当我单击一张卡片展开数据时，同一行中的所有其他卡片都会展开以填满整个行高。这看起来很糟糕，并不是预期的卡片行为。我更希望卡片 NOT 被点击以保持其原始大小，而只有被点击的卡片被展开。

我首先尝试用 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 实际上也可以。（我不确定是否所有浏览器都支持相同的值）

在 CSS 网格行内扩展卡片

Expanding Cards Inside CSS Grid Row

css

css-grid