如何使用css网格将接下来的两个元素放在彼此下面

使用此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
...       ...