HTML CSS

LIST GRID VIEW WITH 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>

DEFAULT HTML LIST

01

#demo {   REMOVE BULLETS & IDENTATION   list-style: none;   padding: 0; margin: 0;

DEFAULT LIST MODE

02

  1 ITEM PER ROW (LIST VIEW)   display: grid;   grid-template-columns: 100%;   grid-gap: 5px; }

GRID TRANSFORM

03

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)) }