如何根据每一行最高的内容让每一行高度相同

Question

我需要根据每一行中最高的内容将每一行的高度设置为相等。

例如做：

c-column {
    display: grid;
    grid-auto-rows: 1fr;
}

行不通，因为第一行会变高。我有这个标记，因为我需要使列在移动设备上响应

.c-table {
  display: flex;
  border-radius: 10px;
  box-shadow: 4px 8px 10px #cccccc;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  padding: 40px;
 
}

.c-column>div {
  padding: 24px;
}

.c-column>div:nth-child(odd) {
  background-color: #f4f2f0;
}

<div class="c-table">
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendreri</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
</div>

Answer 1

希望这对您有所帮助，当运行代码片段时，您会看到行将是其中最高项目的高度。

* {
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.description {
  background: blue;
  grid-column: 1 / span 4;
}

.col {
  background: red;
}

<div class="container">
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

Answer 2

c-column个元素是grid子元素，所以不能让grid行适应内部div。

您可以解决此问题，更改布局并删除 c-column 个元素。

否则，你可以在不改变html的情况下使用display:contents获得同样的效果； - 查看片段

.c-table {
  display: grid;
  box-shadow: 4px 8px 10px #cccccc;
  background: transparent;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  padding: 40px;
 
}

.c-column {
  display: contents; /* added */
}
.c-column>div {
  padding: 24px;
}

.c-column>div:nth-child(odd) {
  background-color: #f4f2f0;
}

<div class="c-table">
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendreri</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
  <div class="c-column">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in risus purus. Quisque ac leo pulvinar purus congue vestibulum. Integer hendrerit consectetur tortor quis interdum. Etiam ut porta enim. </div>
  </div>
</div>

如何根据每一行最高的内容让每一行高度相同

How to make each row the same height according to the tallest content in each row

html

css

css-grid