CSS 网格中行/单元格的“自身高度”

问题描述 投票:0回答:1

所以,看看下面的 HTML 代码,我的问题是我有一个由 CMS 管理员管理的元素填充的 CSS 网格,即他们可以向该网格添加元素并设置每个元素的宽度,从而填充网格。他们可以添加的项目之一是“特殊”项目,它可以获取并显示广告。问题在于,广告以固定的尺寸和宽高比上传,而网格的宽度(在代码中设置为 600px)根据其显示的网站而灵活。该元素的高度是根据这个比例计算的(示例中显示为 100px),这意味着内容小于行高。

我该如何处理这个问题?据我所知,我无法以编程方式预测广告将显示在哪一行(请注意“Offer 2”在广告代码之后如何,但在网格中在其之前流动,因此我很难接近这直接在 #grid CSS grid-template-rows 中,因为管理员可以选择在第一行、第二行或第七行中显示广告,或者也可以回流到可用的第一行。

如您所见,广告始终是全角的,因此它始终位于其自身的一行上,因此我想要类似“self-row-template”之类的东西,考虑到它是一个元素,这是不可行的在牢房里。

知道如何解决这个问题吗?

#grid {
  display: grid;
  width: 600px;
  grid-auto-rows: 120px;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}
#grid .item {
  background-color: #eee;
  text-align: center;
  font: 1.5em bold;
  line-height: 120px;
}
#grid .item.width2 {
  grid-column: auto / span 2;
}
#grid .item.width3 {
  grid-column: auto / span 3;
}
#grid .item.special {
  grid-column: auto / span 5 !important;
  height: 100px;
}
<div id='grid'>
  <div class='item link width2'>Link 1</div>
  <div class='item link width3'>Link 2</div>
  <div class='item offer width3'>Offer 1</div>
  <div class='item special width2'>*Special*</div>
  <div class='item offer width2'>Offer 2</div>
  <div class='item offer width2'>Offer 3</div>
  <div class='item link'>Link 3</div>
  <div class='item offer width2'>Offer 4</div>
</div>

css css-grid
1个回答
0
投票

不定义行高,只定义元素高度

#grid {
  display: grid;
  width: 600px;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}
#grid .item {
  background-color: #eee;
  text-align: center;
  font: 1.5em bold;
  line-height: 120px;
  height: 120px;
}
#grid .item.width2 {
  grid-column: auto / span 2;
}
#grid .item.width3 {
  grid-column: auto / span 3;
}
#grid .item.special {
  grid-column: auto / span 5 !important;
  height: 100px;
}
<div id='grid'>
  <div class='item link width2'>Link 1</div>
  <div class='item link width3'>Link 2</div>
  <div class='item offer width3'>Offer 1</div>
  <div class='item special width2'>*Special*</div>
  <div class='item offer width2'>Offer 2</div>
  <div class='item offer width2'>Offer 3</div>
  <div class='item link'>Link 3</div>
  <div class='item offer width2'>Offer 4</div>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.