HTML CSS
(a quick guide)
<ul id="demo"> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li>Item E</li> </ul>
#demo { REMOVE BULLETS & IDENTATION list-style: none; padding: 0; margin: 0;
1 ITEM PER ROW (LIST VIEW) display: grid; grid-template-columns: 100%; grid-gap: 5px; }
HTML TOGGLE BUTTONS <button onclick="document. getElementById('demo').className=''"> LIST</button> <button onclick="document. getElementById('demo').className='grid'"> GRID</button>
3 ITEMS PER ROW (GRID VIEW) #demo.grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }