CSS 让每个网格元素都有不同的高度答案

【问题标题】：CSS have each grid element a different heightCSS 让每个网格元素都有不同的高度
【发布时间】：2019-03-20 04:12:49
【问题描述】：

我有一个包含三列的网格，并且高度会更改以适合所有文本。

.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 .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

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

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

【问题讨论】：

请向我们展示您的 HTML
你尝试过最小高度还是自动高度？

标签： html css alignment css-grid

【解决方案1】：

网格容器的属性align-items的默认值为stretch，这意味着每个网格项将延伸到网格行的高度（如果没有使用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>

【讨论】：

【解决方案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

【讨论】：