Высота ряда сетки становится больше, чем определено - PullRequest
Новая
       6

Высота ряда сетки становится больше, чем определено

0 голосов
/ 18 февраля 2019

Я вложил сетку в другую сетку и определил размер столбцов и строк внутренней сетки (#content) как 1fr.

Но когда я добавляю текст, столбцы отображаются правильно, но высота строки становится больше, и поэтому весь контейнер становится больше.

Я предположил, что это потому, что высота шрифтабольше, чем 1fr, но высота строки даже больше, чем размер шрифта.

Почему меняется высота строки?

PS Все работает правильно, когда я устанавливаю размер строки вauto, но я не понимаю, почему 1fr не работает в этом случае и что определяет точную высоту строки в этом случае.

Codepen: https://codepen.io/s4ek1389/pen/gqZvRZ

HTML: 

<html>
  <body>
    <div id="container">
      <div id="content">
        <div id="label">Author</div>
      </div>
       <div id="image"></div>
    </div>
  </body>
</html>

CSS: 

body {
  background-color: #A9E5BB;
  margin: 0;
}

#container {
  display: grid;
  grid-template-columns: repeat(50, minmax(2vw, auto));
  grid-template-rows: repeat(50, minmax(2vh, auto));
}

#content {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  /* Please take a look at the line below. */
  grid-template-rows: repeat(50, auto);
   /* Please take a look at the line above. */
  grid-column: 11/41;
  grid-row: 8/44;
  background-color: #2D1E2F;
}

#image {
  display: grid;
  background-color: #F7B32B;
  grid-column: 13/23;
  grid-row: 4/48;
}

#label {
  color: white;
  grid-column-start:36;
  grid-row-start: 10;
}

1 Ответ

0 голосов
/ 26 февраля 2019

Я обнаружил проблему: у элементов <p> было поле по умолчанию.Все отлично работает после переопределения их.

...