Почему в моей первой строке есть дополнительное место, когда я установил «vh» для установки разрыва строки сетки вместо относительных значений (fr, процент и т. Д. c.)? - PullRequest
Новая
       6

Почему в моей первой строке есть дополнительное место, когда я установил «vh» для установки разрыва строки сетки вместо относительных значений (fr, процент и т. Д. c.)?

0 голосов
/ 16 марта 2020

Здесь демонстрационная версия: https://codesandbox.io/s/modern-glade-7fwsm

Как вы увидите в таблице стилей (.menu_refactor, строка 91), используя, например, процент или франк, и первая строка имеет то же пространство чем другие ряды. Используя высоту области просмотра, чтобы установить пробелы между строками, и в первой строке будет дополнительное пространство. Почему?

Здесь фрагмент 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;
}

1 Ответ

1 голос
/ 16 марта 2020

Проблема связана не с разрывом, а с использованием grid-template-rows: 80vh;. Это определит одну явную строку с высотой 80vh, а все остальные строки (неявные) будут иметь высоту auto. Поскольку элементы внутри имеют высоту, равную 60vh, у вас всегда будет дополнительный пробел в первом ряду и только в первом ряду, в зависимости от значения разрыва.

Чтобы исправить это, вам нужно либо удалить grid-template-rows: 80vh; (что, я думаю, бесполезно) или используйте grid-auto-rows: 80vh;, чтобы убедиться, что все строки будут иметь одинаковую высоту.

...