Не знаю как сделать кнопку при которой можно было бы сменить вид объектов как на скриншоте, html/css/js
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>