Почему мои элементы сетки CSS перекрываются при размещении в определенном макете?

Я новичок, пытающийся изучить макет сетки CSS. Я пытаюсь создать макет сетки с использованием областей сетки-шаблона.

Однако элементы продолжают перекрываться, потому что мне нужно явно указать высоту элемента карты. Как только меняю на авто, карта исчезает.

Чтобы усложнить ситуацию, я использую вложенные сетки, но виноват контент карты, я также попытался расположить свою сетку в сетке 3x1 на мобильном дисплее. Однако моя карта продолжает выходить за свои границы. Я попытался исправить это с помощью grid-template-rows, но окончательные результаты все еще не выглядят хорошими.

Я потерялся в этом и был бы признателен за небольшую помощь в правильном направлении.

     #maincontent {
              background-color: #f3f3f3;
              min-height: 100%;
              height: auto;
              width: 100%;
              max-width: 100%;
              overflow-x: hidden;
              overflow-y: hidden;
              position: relative;
            }

            #footer {
              background-color: #444;
              color: #aaa;
              font-size: 8pt;
              letter-spacing: 1px;
              padding: 25px;
              text-align: center;
              text-transform: uppercase;
              width: auto;
              /*width: calc(50% - 80px);*/
            }



            /* ====================== Map ====================== */

            #map {
              height: 300px;
              width: 100%;
              background-color: #ccc;
            }

            #map-container {
              grid-area: content;
            }


            /* ====================== Restaurant Filtering ====================== */

            .filter-options {
              display: grid;
              width: 100%;
              height: 50px;
              background-color: #3397DB;
              align-items: center;
              grid-template-areas: "select1 select2";
            }

            .filter-options h2 {
              color: white;
              font-size: 1rem;
              font-weight: normal;
              line-height: 1;
              margin: 0 20px;
            }

            .filter-options select {
              background-color: white;
              border: 1px solid #fff;
              font-family: Arial, sans-serif;
              font-size: 11pt;
              height: 35px;
              letter-spacing: 0;
              margin: 10px;
              padding: 0 10px;
              width: 200px;
            }


            /* ====================== Restaurant Listing ====================== */

            #restaurants-list {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              grid-gap: 10px;
              grid-auto-flow: row;
              grid-area: auto;
              background-color: #f3f3f3;
              list-style: outside none none;
              margin: 0;
              padding: 30px 15px 60px;
              text-align: center;
            }

            #restaurants-list li {
              background-color: #fff;
              border: 2px solid #ccc;
              font-family: Arial, sans-serif;
              margin: 15px;
              min-height: 380px;
              padding: 0 30px 25px;
              text-align: left;
              width: 270px;
            }

            #restaurants-list .restaurant-img {
              background-color: #ccc;
              display: block;
              margin: 0;
              max-width: 100%;
              min-height: 248px;
              min-width: 100%;
            }

            #restaurants-list li h1 {
              color: #f18200;
              font-family: Arial, sans-serif;
              font-size: 14pt;
              font-weight: 200;
              letter-spacing: 0;
              line-height: 1.3;
              margin: 20px 0 10px;
              text-transform: uppercase;
            }

            #restaurants-list p {
              margin: 0;
              font-size: 11pt;
            }

            #restaurants-list li a {
              background-color: orange;
              border-bottom: 3px solid #eee;
              color: #fff;
              display: inline-block;
              font-size: 10pt;
              margin: 15px 0 0;
              padding: 8px 30px 10px;
              text-align: center;
              text-decoration: none;
              text-transform: uppercase;
            }

            #neighborhoods-select {
              grid-area: select1;
            }

            #cuisines-select {
              grid-area: select2;
            }


            /* ====================== Restaurant Details ====================== */

            .inside {
              width: 100%;
            }

            .wrapper {
              display: grid;
              width: 100%;
              grid-template-columns: 1fr;
              grid-template-areas: "restaurantHeader" "mainRestaurantContent" "restaurantFooter";
              justify-content: space-evenly;
            }

            .restaurant-header {
              grid-area: restaurantHeader;
              position: fixed;
              top: 0;
              width: 100%;
              z-index: 1000;
            }

            #footer.restaurant-footer {
              grid-area: restaurantFooter;
              bottom: 0;
              position: absolute;
              width: 100%;
            }

            .restaurant-header {
              top: 0;
              width: 100%;
              z-index: 1000;
            }

            .inside #map {
              background-color: #ccc;
              height: 100%;
              width: 100%;
            }

            #map-container.map-container-class {
              grid-area: restaurantMap;
              height: auto;
              position: fixed;
              right: 0;
              top: 125px;
              width: 50%;
              z-index: 999;
              overflow: hidden;
            }

            #restaurant-name {
              color: #f18200;
              font-family: Arial, sans-serif;
              font-size: 20pt;
              font-weight: 200;
              letter-spacing: 0;
              text-transform: uppercase;
              line-height: 1.1;
            }

            #restaurant-name-div {
              grid-area: restaurantName;
              text-align: center;
            }

            #restaurant-img {
              display: block;
              margin-left: auto;
              margin-right: auto;
              max-width: 100%;
              min-width: 100%;
              width: 100%;
              height: auto;
            }

            #restaurant-img-div {
              grid-area: restaurantImage;
              width: 100%;
              height: 100%;
              overflow: hidden;
              border: 10px solid geen;
              border-radius: 5px;
            }

            #restaurant-address {
              grid-area: address;
              font-size: 12pt;
              text-align: center;
              align-self: center;
            }

            #restaurant-cuisine {
              grid-area: cuisine;
              background-color: #333;
              color: #ddd;
              font-size: 12pt;
              font-weight: 300;
              letter-spacing: 10px;
              margin: 0 0 20px;
              padding: 2px 0;
              text-align: center;
              text-transform: uppercase;
              font-weight: bold;
              width: auto;
            }

            #restaurant-container,
            #reviews-container {
              border-bottom: 1px solid #d9d9d9;
              border-top: 1px solid #fff;
              padding: 140px 40px 30px;
              width: auto;
            }

            #restaurant-container {
              grid-area: restaurantContainer;
              position: relative;
            }

            #restaurant-container {
              display: grid;
              grid-template-columns: 1fr;
              grid-template-areas: "restaurantName" "restaurantImage" "cuisine" "address" "hours";
              justify-content: center;
              height: auto;
            }

            #reviews-container-div {
              grid-area: reviewsContainer;
            }

            #reviews-container {
              padding: 30px 40px 80px;
            }

            #reviews-container h2 {
              color: #f58500;
              font-size: 24pt;
              font-weight: 300;
              letter-spacing: -1px;
              padding-bottom: 1pt;
            }

            #reviews-list {
              margin: 0;
              padding: 0;
            }

            #reviews-list li {
              background-color: #fff;
              border: 2px solid #f3f3f3;
              display: block;
              list-style-type: none;
              margin: 0 0 30px;
              overflow: hidden;
              padding: 0 20px 20px;
              position: relative;
              width: 85%;
            }

            #reviews-list li p {
              margin: 0 0 10px;
            }

            #restaurant-hours-div {
              grid-area: hours;
              position: relative;
              border-radius: 5px;
            }

            #restaurant-hours {
              table-layout: auto;
              width: 100%;
            }

            #restaurant-hours td {
              color: #666;
              text-align: center;
              resize: both;
              overflow: auto;
            }

            #maincontent.restaurantMainContent {
              grid-area: mainRestaurantContent;
              width: 100%;
              height: auto;
              position: relative;
            }

            #maincontent.restaurantMainContent {
              display: inline-grid;
              width: 100%;
              grid-template-columns: 1fr 1fr;
              grid-template-areas: "restaurantContainer restaurantMap" "reviewsContainer restaurantMap";
              justify-content: space-evenly;
            }

            @media (min-width: 320px) and (max-width: 480px) {
              #displayTag {
                font-size: 1em !important;
              }
              #index-body {
                grid-template-columns: 1fr;
                grid-template-areas: "header " "content" "footer ";
              }
              #restaurants-list {
                grid-template-columns: 1fr;
                justify-content: center;
                padding-left: 0;
              }
              .filter-options {
                grid-template-columns: 1fr 1fr;
                grid-template-areas: "select1 select2";
                justify-content: start;
              }
              .filter-options select {
                width: 150px;
              }
              #map-container.map-container-class {
                height: 50%;
                position: fixed;
                left: 0;
                top: 10px;
                width: auto;
              }
              #restaurantContainer {
                position: relative;
                top: 150px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                grid-row-start: 2;
              }
              #maincontent.restaurantMainContent {
                grid-template-columns: 1fr;
                grid-template-areas: "restaurantMap" "restaurantContainer" "reviewsContainer";
                clear: both;
              }
            }

<!-- language: lang-html -->



            <body class = "inside">
  <div class = "wrapper">
  <!-- Beginning header -->
  <header class = "restaurant-header">
    <!-- Beginning nav -->
    <nav>
      <h1><a href = "/">Restaurant Reviews</a></h1>
    </nav>
    <!-- Beginning breadcrumb -->
    <ul id = "breadcrumb">
      <li><a href = "/">Home</a></li>
    </ul>
    <!-- End breadcrumb -->
    <!-- End nav -->
  </header>
  <!-- End header -->

  <!-- Beginning main -->

        <div id = "maincontent" class = "restaurantMainContent">
        <!-- Beginning map -->

          <section id = "map-container" class = "map-container-class">
            <div id = "map"></div>
          </section>

        <!-- End map -->
        <!-- Beginning restaurant -->

          <div id = "restaurant-container">
            <div id = "restaurant-name-div"> <p><h1 id = "restaurant-name"></h1></div>
            <div id = "restaurant-img-div"><img id = "restaurant-img" alt = "Image of the restaurant selected"></div>
            <div id = "restaurant-cuisine"></div>
            <div id = "restaurant-address"></div>
            <div id = "restaurant-hours-div">
              <table id = "restaurant-hours"></table>
            </div>
          </div>

        <!-- end restaurant -->
        <!-- Beginning reviews -->
        <div id = "reviews-container-div">
          <section id = "reviews-container">
            <ul id = "reviews-list"></ul>
          </section>
        </div>
        <!-- End reviews -->
    </div>
      <!-- End main -->

      <!-- Beginning footer -->

      <footer id = "footer" class = "restaurant-footer">
        Copyright (c) 2017 <a href = "/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
      </footer>
    </div>