所以,看看下面的 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>
不定义行高,只定义元素高度
#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>