我是一个尝试学习 CSS 网格布局的菜鸟。我正在尝试使用网格模板区域创建网格布局。
但是，元素保持重叠，因为我必须明确指定 map 元素的高度。一旦我将其更改为自动， map 就会消失。
使事情复杂化的是，我使用的是嵌套网格，但它的 map 内容才是罪魁祸首，我还尝试在移动显示中将我的网格排列为 3x1 网格。然而，我的 map 总是越界。我试图通过使用 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>
最佳答案
我找到了解决方案，我将 grid-auto-rows: minmax(300px, auto) 添加到包含我的 map 、餐厅和评论容器的网格中。工作起来很有魅力!
关于html - 为什么我的 css 网格项在以特定布局排列时会重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52675479/