为什么当我设置 "vh" ' 来设置网格行间距而不是相对值(fr、百分比等)时，我的第一行有额外的空间？

Question

这里是演示：https://codesandbox.io/s/modern-glade-7fwsm

正如您将在样式表(.menu_refactor，第91行(中看到的那样，例如使用百分比或fr并且第一行具有与其他行相同的空间。使用视口高度设置行之间的空间，并且第一行具有额外的空间。为什么？

这里是ReactJS片段：

import React, { Component } from "react";
import "./styles.css";
export default class Restaurant extends Component {
createDish = (dishname, ingredient, price, imageSource) => {
return (
<div className="dish_presentation_refactor">
<div className="dish_picture_container_refactor">
<img
alt="hamburger_image"
className="dish_picture"
src="https://tampamagazines.com/wp-content/uploads/2017/06/CafeDufrainSteakBurger.jpg"
/>
</div>
<div className="dish_data_refactor">
<div className="dish_name_price_refactor">
<h4 className="dish_name_refactor">{dishname}</h4>
<p className="ingredient_refactor">{ingredient}</p>
</div>
</div>
<div className="dish_price_refactor">
<p>{price}€</p>
</div>
</div>
);
};
render() {
// adding the JSX elements here
let DishSequence = [];
var i;
for (i = 0; i < 5; i++) {
DishSequence.push(
this.createDish(
"dishname",
"ingredient",
"price",
"https://cdn.radiofrance.fr/s3/cruiser-production/2019/02/3e27345f-9e1e-45bb-9e5f-906f0abb2870/1200x680_gettyimages-922684138.jpg"
)
);
}
return (
<div className="component">
<div className="dish_category_container">
<h3 className="dish_category">dish_category</h3>
<div className="menu_refactor">
{/*implementing the JSX element in the code*/}
{DishSequence}
</div>
</div>
</div>
);
}
}

这里的CSS片段：

.dish_category_container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.dish_category {
font-size: 2em;
}
.menu_refactor {
width: 100%;
height: 100%;
display: grid;
justify-content: center;
/*grid-template-rows: 80vh; 
grid-column-gap:3vw;
justify-content: space-around;*/
}
.menu_refactor > div {
height: 100%;
width: 100%;
margin: auto;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
background: orange;
}
.menu_refactor > div:first-of-type {
background: lightblue;
}
.dish_picture_container_refactor {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dish_picture {
width: 30vw;
}
.dish_name_refactor {
width: 100%;
margin: auto;
text-align: center;
font-size: 0.9em;
font-weight: bold;
color: #030200;
}
.dish_data_refactor {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
}
.ingredient_refactor {
padding: 3.5vh 0;
color: #a37704;
font-size: 0.7em;
}
.dish_price_refactor {
color: #5b543c;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
}
.menu_refactor {
grid-template-columns: 1fr;
grid-template-rows: 1fr; /* even space between rows*/
grid-template-rows: 80%;
grid-template-rows: 80vh; /* uneven space between rows*/
grid-row-gap: 10vh;
/*justify-content: space-around;*/
}
.menu_refactor > div {
width: 100%;
height: 60vh;
padding: 0 3vw;
margin: 0;
margin: auto;
}

Answer 1

问题与间隙无关，而是与grid-template-rows: 80vh;的使用有关。这将定义一个高度为80vh的显式行，所有其他行(隐式行(将具有高度自动。由于里面的元素的高度等于60vh，所以第一行总是有额外的空间，只有第一行才有间隙值。

要解决此问题，您需要删除grid-template-rows: 80vh;(我想这是无用的(或使用grid-auto-rows: 80vh;来确保所有行都具有相同的高度。