html - 有没有一种干净的方法可以在空的 CSS 网格单元格中保持连续的背景？

Question

简而言之，我的标记是这样的:

<h1>Heading</h1>
<img>
<p></p>
<img>
<p></p>

对于移动设备，这正是我需要的内容顺序。但是，在桌面上，我想将图像拉出到左栏并将文本放在右栏上。

1) 目前我已经使用 CSS Grid 实现了(两列没有定义行)。有推荐的更优雅的方法吗？

2) 我想不通如何在右栏中设置背景(除了段落 block 的负顶部和底部边距)。有什么建议吗？

我的截图

The mockup I'm trying to get to (特别是右栏的背景)

Answer 1

好吧，我可以展示的一种解决方案并不是很干净。

这将意味着为尽可能多的 p 创建选择器，以强制它们与填充器共享一个单元格，该单元格将保留背景。

我使用了一个邻居选择器，但你可以使用一些 nth-child 变体

.container {
	border: solid 1px red;
	display: inline-grid;
	grid-template-columns: 200px 200px;
}

p {
	background-color: lightgreen;
	grid-column: 2;
	grid-row: 2;
}

p ~ p {
	grid-row: 3;
}

.left {
	background-color: tomato;
	margin: 10px;
	grid-column: 1;
	height: 50px;
}


h1 {
	grid-column: 1 / span 2;
	grid-row: 1;
	border: solid 1px blue;
}

.filler {
	background-color: yellow;
	height: 100%;
	grid-row: 1 / span 25;
	grid-column: 2;
	opacity: 0.5;
}

<div class="container">
<h1>Heading</h1>
<div class="left">IMAGE HERE</div>
<p>ppppppp</p>
<div class="left">IMAGE HERE</div>
<p>pp p p p p p </p>
<div class="filler"></div>
</div>