是否有一种干净的方法来保持空CSS网格单元格的连续背景？

Question

简而言之，我的标记就是：

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

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

1）目前我已经使用CSS Grid实现了（两列没有定义行）。建议使用更优雅的方法吗？

2）我无法理解如何在右列中运行背景（除了段落块的负顶部和底部边距）。有什么建议吗？

我拥有的截图

The mockup I'm trying to get to（特别是右栏中的背景）

Answer 1

嗯，我能展示的一个解决方案并不是很干净。

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

我使用了邻居选择器，但你可以选择一些n-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>