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

Question

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

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

在这里，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;来确保所有行都具有相同的高度。