Grid to List Toggle using CSS Grid

Jennifer Bland
5 min readJan 6, 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 CSS Grid.

What We Will Be Creating

How to 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>Grid List Toggle using CSS Grid</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.

How To Add 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…

--

--

Jennifer Bland
Jennifer Bland

Written by Jennifer Bland

Software Engineer. Google Developers Expert. Keynote Speaker. Entrepreneur. Mountain Climber. Neil Diamond fan. World traveler. jenniferbland.com & codeprep.io

Responses (2)