CSS-сетки оставляют пустое пространство перед элементом, который вмещается в него - PullRequest
Новая
       11

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

0 голосов
/ 05 мая 2018

Привет, ребята, я не смог найти никаких полезных примеров, так как я никогда не использовал CSS-сетки, в любом случае, как бы я заполнил пустое пространство в сетке следующим элементом? Мой элемент 1fr не помещается в предыдущее доступное пространство. Это из-за того, что я удваиваю высоту класса или как? Как я уже говорил, я никогда не использовал CSS-сетки, но мне они нужны только сейчас, и это последнее, что я хотел бы добавить в код, не могли бы вы, ребята, помочь мне? 

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 30rem;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}
<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>

Есть ли простой способ сделать это без использования медиазапросов или чего-то подобного?

1 Ответ

0 голосов
/ 05 мая 2018

Попробуйте, добавьте 

grid-auto-flow:dense; to grid container

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

Также для .doubleheight , если вы добавляете к нему высоту, но не говорите макету сетки, что вы занимаете столько места, это необходимо, потому что от этого зависит положение другого div'а. Вы можете сделать это, добавив 

   .double-height {
      height: 31rem;
      grid-row: span 2!important;
      grid-column: span 2!important;
    }

Этот код сообщает, что div двойной высоты должен перейти на 2 столбца вправо от его собственной позиции и перейти на 2 строки вниз от его собственной позиции. 

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
  grid-auto-flow:dense;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 31rem;
  grid-row: span 2!important;
  grid-column: span 2!important;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}
<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>
...