Верстка, отобразить объекты в блоки, или в ленту

Question

Не знаю как сделать кнопку при которой можно было бы сменить вид объектов как на скриншоте, html/css/js

Answer 1

Как вариант:

const el1 = document.getElementById("rows");
const el2 = document.getElementById("columns");
const mainLayaout = document.getElementById("mainLayaout");
el1.addEventListener("click", toRows, false);
el2.addEventListener("click", toColumns, false);

function toRows() {
  mainLayaout.style.cssText = "display: flex; flex-direction: column"; 
}

function toColumns() {
  mainLayaout.style.cssText = "display: grid; grid-template-columns: repeat(3, 1fr)"; 
}

#card {
  width: 100px;
  height: 100px;
  background: red;
  margin: 1em;
}

<button id="rows">Список</button>
<button id="columns">Колонки</button>
<div id="mainLayaout">
  <section id="card"></section>
  <section id="card"></section>
  <section id="card"></section>
</div>

БЛОГ НА HUSL

Верстка, отобразить объекты в блоки, или в ленту

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