What approach is good for separating product list view and grid view?

35 1 1

So i have a website where i intend to have 2 buttons toggleable for grid view of collection products or list view. So i already worked with the grid view for the collection page. Now i want the same collection of products to be switched to list view when i click the respective button above my collections page.

So i am super confused to what to do.

Here are my requirements

Here is my grid view:grid view.JPG

So as per the requirement i only show the product title with the price and the sale price.


Here is the list view : 


list view.JPG



The list view contains the product's title, description, price and sale price. And of course a different style




So my question is what kind of approach is better
1. Making separate pages for both views and loading each pages on the button click . OR

2. Just changing the css when the grid view or list view are selected respectively. 

Please help me out and if there are any more suggestions i would love it :D