Проблема гибкости строк сетки CSS - PullRequest
Новая
       13

Проблема гибкости строк сетки CSS

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

Я понимаю, почему это не работает, но я не могу придумать альтернативы.Есть ли способ, чтобы строки каждого столбца охватывали высоту его содержимого, отличную от строк других столбцов?

То, что вставлено ниже, работает именно так, как мне нужно, но это не правильно..recent начинается со строки 2 и охватывает 2 строки, что составляет общее количество строк 4. Это создает огромный разрыв ниже .middle и .right.Вот скриншот:

Screenshot of CSS grid

@ dwjohnston скриншот сетки с вашим решением:

Screenshot of grid with your solution

.grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 20px;
  align-items: start;
  background: pink;
}

.grid>.left {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: green;
}

.grid>.recent {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

.grid>.middle {
  grid-column: 4 / span 5;
  grid-row: 1 / span 2;
  background: gray;
}

.grid>.right {
  grid-column: 9 / span 3;
  grid-row: 1 / span 2;
  background: brown;
}
<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="recent">
    Recent
    <br> Testing
    <br>
  </div>
  <div class="middle">
    Middle
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
  </div>
  <div class="right">
    Right
  </div>
</div>

Ответы [ 2 ]

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

Я надеюсь, что это то, что вы ищете, согласно приведенным ниже комментариям для меня и других, вы можете увидеть, что это без каких-либо пробелов, надеюсь, это поможет:) 

.grid {
  display: grid;
  grid-gap: 20px;
  background: pink;
  height: 100vh;
  grid-template-rows: 20px 20px auto;
  grid-template-columns: 30% auto 30%;
}
.grid > .left {
  grid-column: 1;
  grid-row: 1;
  background: green;
}
.grid > .recent {
  grid-column: 1;
  grid-row: 2;
  background: red;
}
.grid > .middle {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: gray;
  height: 100vh;
}
.grid > .right {
  grid-column: 3;
  grid-row: 1;
  background: brown;
}
<div class="grid">
  <div class="left">Left</div>
  <div class="recent">
    Recent Testing
  </div>
  <div class="middle">Middle
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
  </div>
  <div class="right">Right</div>
</div>
0 голосов
/ 16 октября 2018

Хорошо, если я правильно понимаю проблему, я думаю, что вижу проблему.

Вот мое решение: 

.grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 20px;
  align-items: start;
  background: pink;
}

.grid>.left {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: green;
}

.grid>.recent {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

.grid>.middle {
  grid-column: 4 / span 5;
  grid-row: 1 / span 4;
  background: gray;
}

.grid>.right {
  grid-column: 9 / span 3;
  grid-row: 1 / span 3;
  background: brown;
}
<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="recent">
    Recent
    <br> Testing
    <br>
  </div>
  <div class="middle">
    Middle
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
  </div>
  <div class="right">
    Right
  </div>
</div>

То, что вы делали в своем ответе, было:

  • .left.занимает строку 1,
  • .recent занимает строки 2 и 3, это создает третий ряд внизу, включая разрыв в 20 пикселей.
  • .middle занимает строки 1 и 2, но действительно большой, поэтому он выталкивает строку 2 и делает ее массивной.

То, что я сделал, сделано .middleпролет 4, поэтому он занимает строки 1,2,3,4.Это позволяет .recent иметь собственные строки небольшого размера, а .middle четвертая строка (по умолчанию все строки имеют автоматический размер) занимает столько места, сколько требуется для роста.

Screenshot

...