CSS具有每个网格元素不同的高度

Question

我有一个由三列组成的网格，其高度会更改以适合所有文本。

bk.date1 <-  "Ma 2012 august 14 11:28:30"
bk.german.date <- ymd_hms(bk.date1, locale = "German")
bk.german.date   

# [1] "2012-08-14 11:28:30 UTC"

我怎样才能使每个框的大小都适合其自己的文本，并且它们的高度不一样？因为它是前两列的大小调整为适合第三列中最大的文本。

Answer 1

网格容器的属性align-items的默认值为stretch，这意味着每个网格项将扩展到< em>网格行（如果未使用grid-template-rows设置高度，则为行中最大的项）。

要更改此设置，您只需将align-items: flex-start添加到网格容器（.contentWrapper）-参见以下演示：

body {
  background: #ddd;
}

.contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
  align-items: flex-start; /* ADDED */
}

.contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

.box {
  background: #fff;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}

<div class="contentWrapper">
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here</div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here </div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text
      here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>
  </div>
</div>

Answer 2

我解决此问题的方法是将margin-bottom: auto添加到每个.contentWrapper .box中。这将文本推向图像，并使每个单元格适合其内容。

.main .contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
}

.main .contentWrapper .box {
  background-color: #eee;
  margin-bottom: auto;
}

.main .contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}

<div class="main">
  <div class="contentWrapper">
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div>
    </div>
  </div>
</div>

jsFiddle