Question

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

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

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

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

＆＃13;

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");
});

＆＃13;

/*
 * 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

在CSS Grid Row中扩展卡片

1 个答案: