I am new to CSS grid layout and currently experimenting with grid-template-areas to create a grid layout.
However, I am facing issues with items overlapping because I have set the height of the map item explicitly. When changed to auto, the map disappears.
Adding to the complexity, I am using nested grids, but it seems like the map content is causing the problem. I also tried arranging my grid in a 3x1 layout for mobile display, but the map keeps going beyond its boundaries. Even after using grid-template-rows to fix this, the final results are not satisfactory.
I could really use some guidance on how to solve these problems. Any help would be greatly appreciated.
#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;
...
</stylesheet>
<body class="inside">
<div class="wrapper">
<header id="header" class="restaurant-header">
<nav>
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
<ul id="breadcrumb">
<li><a href="/">Home</a></li>
</ul>
</header>
<div id="maincontent" class="restaurantMainContent">
<section id="map-container" class="map-container-class">
<div id="map"></div>
</section>
<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"></di...
<div id="restaurant-cuisine"></div>
<div id="restaurant-address"></div>
<div id="restaurant-hours-div">
<table id="restaurant-hours"></table>
</div>
</div>
<div id="reviews-container-div">
<section id="reviews-container">
<ul id="reviews-list"></ul>
</section>
</div>
</div>
<footer id="footer" class="restaurant-footer">
Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>