структура сетки как бы разрушается после применения значения к одному из ее элементов - PullRequest
Новая
       8

структура сетки как бы разрушается после применения значения к одному из ее элементов

0 голосов
/ 01 июня 2018

я хочу, чтобы элемент 5 имел значение свойства, как показано ниже: grid-row: row-start 3 / row-end 6;я имею в виду, что я хочу, чтобы пункт 5 расширился от строки 3 до строки 6 (занимать пространство, равное 3 элементам по вертикали).но как только я применяю значение в конце строки 6, я думаю, что вся структура как бы рухнула и потеряла свою высоту по сравнению с тем, что имела до применения значения (она как бы сжимается!).я не знаю, где я не прав! 

[class^="griditem"] {
  color: white;
  text-align: center;
  font-size: 3rem;
  font-family: monospace;
  border: 2px solid black;
}

/* ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(6, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(6, [row-start] 1fr [row-end]);

  /*        grid-auto-rows: minmax(auto, 200px);*/
  grid-template-areas: ;
  grid-gap: 5px;
  /*  grid-auto-flow: column;*/
  border: 2px solid green;
  padding: 5px;
}

/* ----------------------------------------------------- */

.griditem1 {
  grid-column: col-start / col-start 3;
  grid-row: row-start 2 / row-end 3;
  background-color: red;
}

.griditem2 {
  grid-column: col-start 3 / col-end 4;
  grid-row: row-start / row-end 4;
  background-color: orange;
}

.griditem3 {
  grid-column: col-start 5 / col-end 6;
  grid-row: row-start 2 / row-end 4;
  background-color: darksalmon;
}

.griditem4 {
  grid-column: col-start 2 / col-end 3;
  grid-row: row-start / row-end 5;
  background-color: rgb(187, 200, 123);
}

.griditem5 {
  grid-column: col-start 1 / col-end 1;
  grid-row: row-start 3 / row-end ;
  background-color: rgb(30, 123, 238);
}

.griditem6 {
  grid-column: col-start 5 / col-start 6;
  grid-row: row-start 1 / row-end 7;
  background-color: deeppink;
}

/* ----------------------------------------------------- */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>implicit line names with grid areas</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="grid">
    <div class="griditem1">1</div>
    <div class="griditem2">2</div>
    <div class="griditem3">3</div>
    <div class="griditem4">4</div>
    <div class="griditem5">5</div>
    <div class="griditem6">6</div>
  </div>
</body>
</html>
...