Нерегулярные линии сетки на одной части css сетки - PullRequest
Новая
       12

Нерегулярные линии сетки на одной части css сетки

1 голос
/ 17 апреля 2020

У меня очень простая сетка, настроенная в CSS, но когда я смотрю на линии сетки в инспекторе, внизу появляется странная неровность. Я не могу понять, почему это существует, когда все остальные линии сетки являются правильными.

Специального стиля на div-4 нет, он такой же, как и остальные. Это как-то связано с полями, производимыми тегом h3?

enter image description here

HTML

<div class="left-sidebar-grid">
    <div class="div1">
        <h3>Div1</h3>
    </div>
    <div class="div2">
        <h3>Div2</h3>
    </div>
    <div class="div3">
        <h3>Div3</h3>
    </div>
    <div class="div4">
        <h3>Div4</h3>
    </div>
</div>

CSS 

.left-sidebar-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 16px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }

1 Ответ

0 голосов
/ 17 апреля 2020

Вы определили только 8 явных строк и поместили div4, начиная со строки 10, что создаст 2 дополнительные строки, так что в итоге вы получите 10 строк, в которых только 8 имеют размеры, используя 1fr, а 2 будет имеют размер auto: пустой, который вы видите, и тот, в который вы поместили div4.

Чтобы избежать этого, используйте grid-auto-rows:1fr вместо вашего шаблона, чтобы убедиться, что все строки имеют одинаковый размер : 

.left-sidebar-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 16px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }
<div class="left-sidebar-grid">
    <div class="div1">
        <h3>Div1</h3>
    </div>
    <div class="div2">
        <h3>Div2</h3>
    </div>
    <div class="div3">
        <h3>Div3</h3>
    </div>
    <div class="div4">
        <h3>Div4</h3>
    </div>
</div>

enter image description here

Вы также можете упростить свой код, как показано ниже: 

.left-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 16px;
}

.div1 {
  grid-row:span 1;
}

.div2 {
  grid-row:span 2;
}

.div3 {
  grid-row:span 6;
}

.div4 {
  grid-row:span 1;
}
<div class="left-sidebar-grid">
  <div class="div1">
    <h3>Div1</h3>
  </div>
  <div class="div2">
    <h3>Div2</h3>
  </div>
  <div class="div3">
    <h3>Div3</h3>
  </div>
  <div class="div4">
    <h3>Div4</h3>
  </div>
</div>
...