0

Всем привет, нужно реализовать такое же расположение блоков как я сделал ниже, только с одним условием: неважно сколько блоков у нас будет, 1 или 10, они всегда должны распологаться все на своих местах.

Пробдема моего кода, что когда у нас два блока к примеру, все разъезжается. Все эти блоки это посты блога, нужно чтоб также работала автоподгрузка блоков, которая будет реализована на сайте. Буду рад любым идеям.

.wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wrapper div{
width : 31%;
background: green;
height: 80px;
margin-bottom: 10px;
}
.wrapper div.horizontal{
width : 66%;
}
<div class="wrapper">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

3 ответа 3

1

При удалении любого блока будет просто пустота.

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 4; }
.div6 { grid-area: 3 / 1 / 4 / 3; }
.div7 { grid-area: 3 / 3 / 4 / 4; }
.div8 { grid-area: 4 / 1 / 5 / 2; }
.div9 { grid-area: 4 / 2 / 5 / 3; }
.div10 { grid-area: 4 / 3 / 5 / 4; }

.parent>div {background: #eee;height: 100px;}
<div class="parent">
  <div class="div1"> </div>
  <div class="div2"> </div>
  <div class="div3"> </div>
  <div class="div4"> </div>
  <div class="div5"> </div>
  <div class="div6"> </div>
  <div class="div7"> </div>
  <div class="div8"> </div>
  <div class="div9"> </div>
  <div class="div10"> </div>
</div>

2
  • спасибо за ответ, хорошее решение, только смущает количество стилей, если будет 100 постов. И неизвестно заранее сколько рядов будет grid-template-rows , просто прописать с запасом?
    – Alexandr
    21 дек 2021 в 10:14
  • @Alexandr Ну а как еще? Если сетка блоков не должна меняться при удалении любого блока, тут так или иначе придется либо стили позиций каждого блока прописывать, либо вообще верстать эту сетку в виде таблицы. Если вы говорите, блоков может быть даже 100, может имеет смысла пересмотреть структуру верстки вообще? Вряд ли, пустота вместо отсутствующего блока будет уместна с таким количеством блоков, может просто замещать отсутствующие чем-то другим?
    – Pilaton
    21 дек 2021 в 12:07
0

Я попробовал сделать это, с помощью grid, также изменил некоторые стили:

    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }
    .wrapper div{
      background: green;
      height: 80px;
    }
1
  • похоже, что так не выводит как надо
    – Alexandr
    21 дек 2021 в 10:08
0

Решил эту проблему с помощью добавления margin тем элементам, которые могут выпасть из сетки.

*{
  margin: 0;
  padding: 0;
}
.wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wrapper div{
width : 30%;
background: green;
height: 80px;
margin-bottom: 10px;
}
.wrapper div.horizontal{
width : 65%;
}
.wrapper div:nth-child(10n + 2 ), .wrapper div:nth-child(10n + 9){
 margin-right: auto;
 margin-left: 5%;
}
<div class="wrapper">
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
   <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
 
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.