Создать сетку с панелью вкладок в каждом столбце?

Question

Я пытаюсь создать таблицу / сетку, используя div для показа панелей с несколькими вкладками, из стороны в сторону, это для сайта проката автомобилей.

Я пытался использовать построчное расположение для панелей вкладок с изображением, но изображение занимало всю строку. Я отображаю панель вкладок как часть статической и панель вкладок части с Заголовок первый, картинка вторая и панели вкладок с ценами и информацией третьи.

Моя проблема заключается в том, что в тот момент, когда я помещаю свои вкладки в таблицу table / div или в любой div, который обозначает использование строк и столбцов, панель вкладок больше не будет отображаться как панель вкладок. Пример ниже представляет собой измененный пример, который я использовал из http://jsfiddle.net/DHTTWL/jmdjpge0/, где я пытаюсь создать сетку. Как лучше всего отображать вкладки в табличном формате?

<style>
.grid-container {
display : grid;
grid-template-columns: auto auto;
background-color: #2196F3;
padding: 10px;
}
</style>


<div class="grid-container">
<div class="grid-item">

<div id="tabs">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
</ul>
<div id="tabs-1">
<p>Tabs in tab!</p>
  <div id="more-tabs1">
      <ul>
          <li><a href="#nested-tabs-1">Child Tab 1</a></li>
          <li><a href="#nested-tabs-2">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-1"><p>Content here...</p></div>
      <div id="nested-tabs-2"><p>More content here...</p></div>
  </div>
  </div>
  <div id="tabs-2">
   <p>Tabs in tab!</p>
   <div id="more-tabs">
      <ul>
          <li><a href="#nested-tabs-1">Child Tab 1</a></li>
          <li><a href="#nested-tabs-2">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-1"><p>Content here...</p></div>
      <div id="nested-tabs-2"><p>More content here...</p></div>
  </div>
 </div>
 </div>
 </div>
 <div class="grid-item">


 <div id="tabs">
 <ul>
 <li><a href="#tabs-1">First Tab</a></li>
 <li><a href="#tabs-2">Second Tab</a></li>
 </ul>
 <div id="tabs-1">
 <p>Tabs in tab!</p>
  <div id="more-tabs1">
      <ul>
          <li><a href="#nested-tabs-4">Child Tab 1</a></li>
          <li><a href="#nested-tabs-5">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-4"><p>Content here...</p></div>
      <div id="nested-tabs-5"><p>More content here...</p></div>
  </div>
</div>
<div id="tabs-2">
  <p>Tabs in tab!</p>
  <div id="more-tabs">
      <ul>
          <li><a href="#nested-tabs-6">Child Tab 1</a></li>
          <li><a href="#nested-tabs-7">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-6"><p>Content here...</p></div>
      <div id="nested-tabs-7"><p>More content here...</p></div>
  </div>
 </div>
</div>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#more-tabs" ).tabs();
$( "#more-tabs1" ).tabs();
});
</script>

Этот код отображает первую вкладку, но не вторую, вторые вкладки в конечном итоге отображаются в формате html. Должен ли я использовать второй сценарий для второй вкладки? У меня есть другой сценарий, который является динамическим в том смысле, что вы можете добавлять или удалять вкладки по мере необходимости со всей информацией, однако я испытываю ту же проблему с вкладками, которые не все отображаются так, как они предназначены.