сетка-авто-поток плотный, не удаляя промежутки между элементами - PullRequest
Новая
       15

сетка-авто-поток плотный, не удаляя промежутки между элементами

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

enter image description here

Я пытался устранить пробел в сетке, думая, что это может иметь какое-то отношение к этому, но это ничего не решает.Кажется, что все изображения остаются в том же порядке, что и в HTML.Я думал, что они должны были переставить, чтобы удалить все пробелы.Проблема в том, что я не хочу, чтобы между элементами был промежуток, и я хочу, чтобы все элементы плотно прилегали друг к другу.

Вот части моего кода, касающиеся проблемы:

html 

<div class="Gallery">
    <img src="images/amp.jpg" class="img big">
    <img src="images/car.jpg" class="img ">
    <img src="images/bwp1.jpg" class="img ">
    <img src="images/street.jpeg" class="img big">
    <img src="images/mtn.jpg" class="img big">
    <img src="images/window.jpg" class="img big">
    <img src="images/streetphoto.jpg" class="img big">
</div>

css 

    .Gallery{
      display:-ms-grid;
      display:grid;
      grid-gap: 10px;
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-auto-flow: dense;
    }                
    img {
      max-width: 100%;
    }

  .big{
    -ms-grid-column-span: 2;
    -ms-grid-column: auto;
        grid-column: auto/ span 2;
    -ms-grid-row-span: 2;
    -ms-grid-row: auto;
        grid-row: auto/span 2;
  }

1 Ответ

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

Вы писали:

Кажется, что все изображения остаются в том же порядке, что и в HTML.Я думал, что они должны были переставить, чтобы удалить все пробелы.

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

Спецификация сетки:

§ 7.7.Автоматическое размещение: свойство grid-auto-flow

плотное

Если указано, алгоритм автоматического размещения использует «алгоритм плотной упаковки, который пытается заполнить отверстия в сетке раньше, если более мелкие элементы появляются позже .Это может привести к тому, что элементы будут отображаться не в порядке, при этом будут заполнены отверстия, оставленные более крупными элементами.

(выделено мной)

Youписал (а):

Проблема в том, что я не хочу промежуток между элементами, и я хочу, чтобы все элементы плотно прилегали друг к другу.

Смотрите этот пост: Только для CSS макет кладки

...