HTML CSS

LIST GRID VIEW WITH HTML CSS

<button id="sList" onclick='document .getElementById("lgDemo").classList. remove("grid")'>LIST</button>   <button id="sGrid" onclick='document .getElementById("lgDemo").classList. add("grid")'>GRID</button>

<div id="lgDemo">   <div class="item">Item A</div>   <div class="item">Item B</div>   <div class="item">Item C</div>   <div class="item">Item D</div> </div>

LIST/GRID HTML ITEMS

01

LIST VIEW BY DEFAULT #lgDemo {   display: grid;   grid-template-columns: 100%; }

CSS TOGGLE LIST/GRID

02

TRANSFORM INTO GRID VIEW #lgDemo.grid    grid-template-columns: 33% 33% 33%; }