Возможно ли реализовать расcтановку блоков за счет css

Question

На изображении 3 варианта расстановки блоков. Ниже представлена структура html

<div>
  <div>Блок 1</div>
  <div>Блок 2</div>
  <div>Блок 3</div>
  <div>Блок 4</div>
  <div>Блок 5</div>
</div>

Давно мучает вопрос. А возможна ли расстановка блоков подобным образом, за счет css и при этом не меняя структуру html кода. То есть только добавляем класс к родителю и получаем необходимую расстановку блока.

Ранее пытался выполнить подобным образом, при помощи grid. В целом возможно, но я так и не нашел способа решения с одним но.

Косяк был в том, что допустим(См.на второй либо первый экран). Где в правом блоке за Блоком под номером 2, следует 3. Этот самый блок 3 он располагался на уровне 5 либо 4 и не был прижат ко второму. То есть выравнивание блоков по горизонтали происходило по принципу сетки. И все сводилось к тому, либо в правом либо в левом блоке. Сами блоки не были поджаты к друг другу.

Кто нибудь может и возможно ли это поправить. Не трогая html, только css?

  .container1 {
  display: grid;
  grid-template-rows: 150px 150px 50px 250px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block2b {
  grid-row: 1/2;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block3c {
  grid-row: 2/5;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block4d {
  grid-row: 3/4;
  grid-column: 1/2;
  border: 1px solid black;
}

.block5e {
  grid-row: 4/5;
  grid-column: 1/2;
  border: 1px solid black;
}

<div id="container" class="container1">
  <div id="block1" class="block1a">Блок 1</div>
  <div id="block2" class="block2b">
    <img src="https://wallbox.ru/wallpapers/main2/201721/cvety-priroda-lug-poni-losadka.jpg" width="100%">
    <img src="https://wallbox.ru/wallpapers/main2/201721/cvety-priroda-lug-poni-losadka.jpg" width="100%">
  </div>
  <div id="block3" class="block3c">Блок 3</div>
  <div id="block4" class="block4d">Блок 4</div>
  <div id="block5" class="block5e">Блок 5</div>
</div>

Answer 1

На мой взгляд возможно несколькими способами:

const cntainer = document.getElementById("container1");
const block1 = document.getElementById("block1");
const block2 = document.getElementById("block2");
const block3 = document.getElementById("block3");
const block4 = document.getElementById("block4");
const block5 = document.getElementById("block5");
const btn = document.getElementById("btn-variant");

btn.addEventListener('click', e => {
  if (container.classList.contains('container1')) {

    container.classList.remove('container1');

    block1.classList.remove('block1a');
    block2.classList.remove('block2b');
    block3.classList.remove('block3c');
    block4.classList.remove('block4d');
    block5.classList.remove('block5e');


    container.classList.add('container2');

    block1.classList.add('block1');
    block2.classList.add('block2');
    block3.classList.add('block3');
    block4.classList.add('block4');
    block5.classList.add('block5');
  } else if (container.classList.contains('container2')) {

    container.classList.remove('container2');

    block1.classList.remove('block1');
    block2.classList.remove('block2');
    block3.classList.remove('block3');
    block4.classList.remove('block4');
    block5.classList.remove('block5');


    container.classList.add('container3');

    block1.classList.add('block1f');
    block2.classList.add('block2f');
    block3.classList.add('block3f');
    block4.classList.add('block4f');
    block5.classList.add('block5f');

  } else {

    container.classList.remove('container3');

    block1.classList.remove('block1f');
    block2.classList.remove('block2f');
    block3.classList.remove('block3f');
    block4.classList.remove('block4f');
    block5.classList.remove('block5f');


    container.classList.add('container1');

    block1.classList.add('block1a');
    block2.classList.add('block2b');
    block3.classList.add('block3c');
    block4.classList.add('block4d');
    block5.classList.add('block5e');
  }
});

.container1 {
  display: grid;
  grid-template-rows: minmax(150px, auto) 150px 50px 250px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block1a {
  grid-row: 1/3;
  grid-column: 1/2;
  border: 1px solid black;
}

.block2b {
  grid-row: 1/2;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block3c {
  grid-row: 2/5;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block4d {
  grid-row: 3/4;
  grid-column: 1/2;
  border: 1px solid black;
}

.block5e {
  grid-row: 4/5;
  grid-column: 1/2;
  border: 1px solid black;
}


/****************variant 2************************/

.container2 {
  display: grid;
  grid-template-rows: 200px 10px 40px 50px 150px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block1 {
  grid-row: 1/2;
  grid-column: 1/-1;
  border: 1px solid black;
}

.block2 {
  grid-row: 3/5;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block3 {
  grid-row: 5/-1;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block4 {
  grid-row: 2/4;
  grid-column: 1/2;
  border: 1px solid black;
}

.block5 {
  grid-row: 4/-1;
  grid-column: 1/2;
  border: 1px solid black;
}


/************************variant3*******************************/

.container3 {
  display: grid;
  grid-template-rows: 80px 50px 30px 50px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block1f {
  grid-row: 1/2;
  grid-column: 1/-1;
  border: 1px solid black;
}

.block2f {
  grid-row: 2/3;
  grid-column: 1/2;
  border: 1px solid black;
}

.block3f {
  grid-row: 2/-1;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block4f {
  grid-row: 3/4;
  grid-column: 1/2;
  border: 1px solid black;
}

.block5f {
  grid-row: 4/-1;
  grid-column: 1/2;
  border: 1px solid black;
}

<div id="container" class="container1">
  <div id="block1" class="block1a">Блок 1</div>
  <div id="block2" class="block2b">Блок 2</div>
  <div id="block3" class="block3c">Блок 3</div>
  <div id="block4" class="block4d">Блок 4</div>
  <div id="block5" class="block5e">Блок 5</div>
</div>
<button id="btn-variant" style="margin-top: 20px;">Variants</button>

Вариант с огромной картинкой во втором блоке:

.container1 {
  display: grid;
  grid-template-rows: minmax(150px, auto) 150px 50px 250px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block1a {
  grid-row: 1/3;
  grid-column: 1/2;
  border: 1px solid black;
}

.block2b {
  grid-row: 1/2;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block3c {
  grid-row: 2/5;
  grid-column: -1/-2;
  border: 1px solid black;
}

.block4d {
  grid-row: 3/4;
  grid-column: 1/2;
  border: 1px solid black;
}

.block5e {
  grid-row: 4/5;
  grid-column: 1/2;
  border: 1px solid black;
}

<div id="container" class="container1">
  <div id="block1" class="block1a">Блок 1</div>
  <div id="block2" class="block2b">Блок 2<img src="https://i.ibb.co/zPR7qd8/cvety-priroda-lug-poni-losadka.jpg" alt="poni"></div>
  <div id="block3" class="block3c">Блок 3</div>
  <div id="block4" class="block4d">Блок 4</div>
  <div id="block5" class="block5e">Блок 5</div>
</div>

БЛОГ НА HUSL

Возможно ли реализовать расcтановку блоков за счет css

Ответы (1 шт):