Установить высоту первого ряда в сетке CSS

Question

У меня есть базовая сетка CSS с использованием display: grid, и я не могу установить высоту первой строки с помощью grid-template-rows.

Мой HTML / CSS выглядит примерно так:

.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row-end: 1;
  background-color: lightslategray;
}

.row2 {
  grid-row-end: 2;
  background-color: lightblue;
}

.row3 {
  grid-row-end: 3;
  background-color: lightskyblue;
}

.col1 {
  grid-column-end: 1;
}

.col2 {
  grid-column-end: 2;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

Однако это приводит к следующему:

Это происходит как впоследняя версия Chrome & Safari (я на Mac), которая заставляет меня поверить, что я что-то неправильно понял в CSS gridlayout.

Как установить высоту первого ряда?

Answer 1

Вы определяете свойства grid-row-end, но используете строки grid-row-start.Вот почему все работает не так, как вы ожидаете.

Если вы хотите, чтобы .row1 элементы покрывали первую строку, тогда вам нужно, чтобы они охватывали всю строку - это означает от строки строки 1 до строки строки 2.

Итак, вместо этого:

• grid-row-end: 1

Используйте любое из этих:

• grid-row-start: 1
• grid-row-end: 2
• grid-row: 1 / 2

.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  /* grid-row-end: 1; */
  grid-row-end: 2;  /* new */
  background-color: lightslategray;
}

.row2 {
  /* grid-row-end: 2; */
  grid-row-end: 3;  /* new */
  background-color: lightblue;
}

.row3 {
  /* grid-row-end: 3; */
  grid-row-end: 4;  /* new */
  background-color: lightskyblue;
}

.col1 {
  /* grid-column-end: 1; */
  grid-column-end: 2;  /* new */
}

.col2 {
  /* grid-column-end: 2; */
  grid-column-end: 3;  /* new */
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

Answer 2

Проблема в том, что grid-column-end ( MDN ) может вводить в заблуждение.row1 в вашем примере должно иметь grid-column-end: 2; вместо grid-column-end: 1;.

. Чтобы это исправить, вы можете просто добавить 1 к каждому grid-column-end и grid-row-end свойству.

Вот фрагмент с фиксированными значениями:

body {
  margin: 0;
}
.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row-end: 2;
  background-color: lightslategray;
}

.row2 {
  grid-row-end: 3;
  background-color: lightblue;
}

.row3 {
  grid-row-end: 4;
  background-color: lightskyblue;
}

.col1 {
  grid-column-end: 2;
}

.col2 {
  grid-column-end: 3;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

Кроме того - я не вижу необходимости в grid-column-end здесь.Вы можете достичь того же результата только с помощью свойств grid-column и grid-row (которые, на мой взгляд, менее запутаны).

body {
  margin: 0;
}
.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row: 1;
  background-color: lightslategray;
}

.row2 {
  grid-row: 2;
  background-color: lightblue;
}

.row3 {
  grid-row: 3;
  background-color: lightskyblue;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>