Change sidebar layout - css-grid

Question

I'm making changes to website front and I need to change the "sidebar(vertical_categories)" so that it doesn't open to side, but that it always open under the chosen category(category_list_large).
I've tried to change the CSS stylesheet, so that it could be done with as few changes as possible to the Click -function. I tried that classes .category_expanded_container and .category_list_large were in the same grid_area, but I didn't get it to work. I add some pictures from the old and new layout, so it's easier to understand. Any help is welcome, thanks for advance.
Old layout
New layout, how it should appear after changes
Here is the Class for Category
class CategoryListViewer {
private $categoryTree = [];
private $prevItemDepth = NULL;
public function __construct($categoryTree) {
$this->categoryTree = $categoryTree;
}
public function show() {
echo '<div class="category_list">';
foreach ($this->categoryTree as $item) {
$this->showCategoryItem($item);
}
echo '</div>';
}
private function showCategoryItem($item) {
if ($item->isImage()) {
$body = '<img src="'.$item->getImage().'" border="0" alt="'.$item->getName().'">';
} else {
$body = $item->getName();
}
if ($item->getDepth() == 1) {
$is_category_header = count($item->getSubcategories()) > 0 ? true : false;
$cat_head_class = $is_category_header ? 'category_list_header' : '';
$cat_head_text_class = $is_category_header ? 'category_list_header_text' : '';
if ($item->isLink()) {
echo '<div class="category_list_large '.$cat_head_class.'"><a class="category_list_color" href="'.$item->getLink().'"><div class="category_link '.$cat_head_text_class.'">'.$body.'</div></a>';
} else {
echo '<div class="category_list_large category_list_color '.$cat_head_class.'"><div class="category_nonlink category_list_color '.$cat_head_text_class.'">'.$body.'</div>';
}
if ($is_category_header) {
echo '<div class="category_side_box category_expand" data-category-expanded="false">';
echo '<i class="icon-chevron-right icon-1x category_list_color"></i>';
echo '</div>';
}
echo '</div>';
if (count($item->getSubcategories()) > 0) {
echo '<div class="category_list_sub_container" data-template="true">';
foreach ($item->getSubcategories() as $i) {
$this->showCategoryItem($i);
}
echo '</div>';
}
} elseif ($item->getDepth() == 2) {
echo '<div class="category_list_sub category_link">'.$body.'</div></div>';
}
}
}
Here is click -function
$('.category_expand').live('click', function(){
let expanded = $(this).attr('data-category-expanded') === 'true' ? true : false;
let content = $(this).parent('.category_list_header').next('.category_list_sub_container');
let header_text = $(this).parent('.category_list_header').find('.category_list_header_text').text();
let container = $('.vertical_categories')[0];
let offset = $(this).position().top;
let offset_div = $('<div class="subcategory_offset"></div>');
$(offset_div).css('width','100%').css('height','calc('+offset+'px - 5.1em)');
$('.category_expand.active').toggleClass('active', false);
if ($('.category_expanded_header').length > 0){
let old_header = $('.expanded_header_text').text();
$('.category_expanded_container').remove();
toggleCategoryShroud(false);
if (old_header === header_text){
return false;
}
}
let expanded_container = $('<div class="category_expanded_container"></div>');
let expanded_header = $('<div class="category_expanded_header"><span class="expanded_header_text">'+header_text+'</span></div>');
$(expanded_header).appendTo(expanded_container);
$(content).clone().attr('data-template','false').prepend(offset_div).appendTo(expanded_container);
$(expanded_container).appendTo(container);
toggleCategoryShroud(true);
$(this).toggleClass('active', true);
});
And here is CSS stylesheet
.vertical_categories{
position:fixed;
top: 0;
left: 0;
padding-left: 10%;
margin-left: -10%;
overflow-y: auto;
box-shadow: 0 0 0.75em rgba(0,0,0,0.2);
z-index: 320;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
display: grid;
grid-template-rows: 5em auto;
grid-auto-flow: column;
grid-template-areas: "toggle subcategory_container" "category_list subcategory_container";
height: 100%;
}
.category_expanded_container{
grid-area: subcategory_container;
display: grid;
grid-template-areas:
"header"
"list";
grid-template-columns: auto;
grid-template-rows: min-content auto;
overflow-y: auto;
}
.category_list_large{
display: grid;
grid-template-columns: auto min-content;
}