如何使用CSS网格将下两个元素相互放置

Question

使用此HTML：

<div class="grid">   
    <h2>Somewhat longer title here</h2>   
    <div class="description">Description here</div>
    <h2>Title 2 here</h2>   
    <div class="description">Description 2 here</div>
    <h2>Title 3 here</h2>
   <div class="description">Description 3 here</div>
    <h2>Title 4 here</h2>
   <div class="description">Description 4 here</div>
   <!-- this may continue with more items -->
</div>

css网格有没有办法像这样显示它：

title1    title2 
descr1    descr2
title3    title4
descr3    descr4
...       ...

因此基本上有2列，并以某种方式说明每个描述都占用h2下方的单元格，但第三个标题仍会自动转到下一行。