Grid to List Toggle Using Flexbox
7 min readJan 5, 2023
In this article, I will show you how to create a toggle to display items in a grid from a list. This will be using basic JavaScript skills with no external code or libraries. We will be using Flexbox.
What we will be creating
Create our starter files
Let’s start by creating three files called index.html and style.css and app.js. In your index.html file add the following starter code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Grid List Toggle</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="app.js"></script> </body> </html>In the style.css file add the following starter code:
body{ padding: 0; margin: 0; height: 100vh; background-color: azure; }For now, we will leave the app.js file blank. We will put in the code later.
Adding our toggle buttons
The first thing we want to do is to create two buttons. These two buttons will have a title Grid and List. When clicked these buttons will change the layout of the cards on the screen.
