Как сетка CSS вычисляет автоматическую высоту строки? - PullRequest
Новая
       4

Как сетка CSS вычисляет автоматическую высоту строки?

0 голосов
/ 25 октября 2018

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

header {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 62px auto;
  background: beige;
}

.cell1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background: salmon; 
}

.cell2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background: MediumSpringGreen; 
}

.cell3 {
  grid-row: 1/3;
  grid-column: 2/3;
  background: PeachPuff; 
}

.cell3-1 {
  background: MediumPurple;
  height: 5px;
}

.cell3-2 {
  background: LightSkyBlue;
  height: 10px;
}

.cell3-3 {
  background: Navy;
  height: 30px;
}
<header>
  <div class="cell1">1</div>
  <div class="cell2">2</div>
  <div class="cell3">
    <div class="cell3-1"></div>
    <div class="cell3-2"></div>
    <div class="cell3-3"></div>
  </div>
</header>

1 Ответ

0 голосов
/ 25 октября 2018

Давайте начнем с вашего заголовка.

Как сетка css вычисляет автоматическую высоту строки?

auto просто означает, что она адаптируется к высоте содержимого в ней,Если содержимое строки auto имеет высоту 100 пикселей, высота строки будет 100 пикселей.

Я не могу понять, как вычислена высота .cell1 (оранжевая).Почему это так высоко?

Поскольку вы указали, что первая строка здесь имеет высоту 62 пикселя: 

  grid-template-rows: 62px auto;

Почему она выше, чем содержимое правой колонки?

Это не ... но я вижу, что вы можете так подумать.

Как высота левых ячеек зависит от правого столбца и содержит его высоту?

Правильный контент в контексте сетки - это только .cell-3 div , но , который вы указали div для охвата 2 строкТаким образом, предполагается, что объединенная высота .cell- и .cell-2.

Содержимое внутри cell-3 не наследует какие-либо свойства сетки и поэтому перемещаетсякак обычно.

...