Как поместить следующие два элемента друг под другом с помощью сетки 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, но третий заголовок все равно автоматически переходит к следующей строке.