网格项目是否可以根据高度调整其跨度？

Question

有没有什么方法可以得到类似于绘图中所示的行为？我的意思是我们当然可以手动指定 grid-row: span x，但 grid-row: span auto 似乎不起作用。我需要所有网格项目的大小相同，但是当一个项目必须调整大小时（由于文本溢出）我需要设置 grid-row: span 2，并且当它变大时 - 分别更高的数字。

要实现这样的目标，我需要编写 .js 还是可以仅使用 css 来完成？这里是code sandbox

Answer 1

您可以将 min-height 添加到“.item” class 以设置相同大小的网格项目。

.item{
    min-height:100px;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  width: 200px;
  height: 200px;
}

.grid {
  width: 100%;
  background-color: chartreuse;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.item {
  background-color: brown;
  height: 30px;
  min-height:100px;
}

.large {
  height: fit-content;
  word-break: break-all;
  grid-row: span auto;
}

<div class="App">
      <div class="container">
        <div class="grid">
          <div class="item"> </div>
          <div class="item large">
            asdasdasdasdasdsadasdasdasdasdasdasd{" "}
          </div>
          <div class="item"> </div>
          <div class="item"> </div>
          <div class="item"> </div>
          <div class="item"> </div>
        </div>
      </div>
    </div>

Answer 2

有时复习一下基础知识很好：

HTML 用于结构。
CSS 用于演示。
JavaScript 是为了行为。

您的问题在 3 以内（“项目必须调整大小（由于文本溢出）”）

Answer 3

let items = document.querySelectorAll('.item')
items.forEach(item => {
  if(item.scrollHeight>item.clientHeight){
    let itemSpan = Math.round(item.scrollHeight/40) + 1  // (height = 30) + (gap = 10) 40 => 
    item.style.cssText = `--n : ${itemSpan}`
  }
})

.container {
  width: 200px;
  margin: 15vw auto;
}
.grid {
  width: 100%;
  background-color: chartreuse;
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 30px;
  grid-auto-flow: row;
  grid-gap: 10px;
  word-break: break-all;
}

.item {
  background-color: gold;
  min-height: 30px;
  width: 50px;
  padding: 5px;
  grid-row: auto / span var(--n); /* var(--n) is calculated with js */
  box-sizing: border-box;
}

<div class="container">
  <div class="grid">
    <div class="item">1</div>
    <div class="item ">2 Lorem ipsum dolor sit amet consectetur adipisicing </div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5 t amet consectetur adipisi</div>
    <div class="item">6 lorem</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9 t amet consectetur adipisi </div>
  </div>
</div>

网格项目是否可以根据高度调整其跨度？

Can a grid item adjust its span based on height?

javascript

css

reactjs

css-grid