我有一个这样的模板：
我想在两列的每一项之间保持相同的高度，具体取决于高度最大的一项，但前提是它们并排时。在较小的屏幕中，当它们的 width: 100% 时，每个 div 都有自己的高度，具体取决于其自己的内容高度。
它应该看起来像这样：
我认为我想要的是类似 display: table 的东西，但我需要两列都能响应。
我发现的所有问题都是关于在两列中保持相同的高度，但我已经使用 Flexbox 来实现这一点。
是否可以仅使用 css 来实现我想要的效果？
编辑：添加代码片段。忘了说了，需要Chrome 36（Android L WebView）支持。
这个问题的第一个答案显示了我想要实现的目标，但是display:subgrid目前 Chrome 任何版本都不支持：对齐不同块的子元素
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>你可以看看@supports过滤可能的显示：选项或subgrid .
示例与display:contents
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}
@supports (display: contents) {
.row.responsive-sm {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.col-50 {
display: contents
}
.title {
grid-row: 1
}
.content {
grid-row: 2;
}
@media screen and (max-width:500px) {
/* set the break point to the right value */
.row.responsive-sm,
.col-50 {
display: block;
}
}
}<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer a
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>对于快速检查属性的支持很有用：https://caniuse.com/