Subscribe

CSS Toggle grid or List view

โœ๏ธ

Learn in this guide how to create a CSS layout that switches easily between list and grid view. See the code examples in the Codepen!

7 May, 2020 ยท 3 min read

Today we are doing a very cool project. We will create a list of items and add two buttons. One button for see a list view and another button to switch to grid view.

This project mainly relies on CSS. But we are using JavaScript to toggle a class on the main wrapper element.

We are going to use CSS Flexbox and Grid to make this work!

Let's get started!

HTML Structure

<div class="container">
  <div class="buttons">
    <div class="list"><i class="fa fa-list"></i></div>
    <div class="grid"><i class="fa fa-th-large"></i></div>
  </div>
  <div class="wrapper" id="wrapper">
    <div class="col">Column #1</div>
    <div class="col">Column #2</div>
    <div class="col">Column #3</div>
    <div class="col">Column #4</div>
  </div>
</div>

So this is our minimal setup. We have one big container in which we center everything like we learned with flex centering. We then have a button div which holds the two buttons and then our wrapper which is the actual item list. In the list we have four columns.

.buttons {
  display: flex;
}
.buttons div {
  margin: 0px 10px;
  color: #fffffa;
  cursor: pointer;
}
.buttons div > * {
  pointer-events: none;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.wrapper.list {
  grid-template-columns: 1fr;
}
.wrapper .col {
  width: calc(100% - 20px);
  height: 200px;
  background: #912f40;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fffffa;
  margin: 10px;
}

So let's go through the CSS code in more depth and explore what's happening:

.buttons {
  display: flex;
}
.buttons div {
  margin: 0px 10px;
  color: #fffffa;
  cursor: pointer;
}
.buttons div > * {
  pointer-events: none;
}

Our buttons we simply wrap in a flex container and each div inside we give some margin to space out. We also add a cursor: pointer which will make it look like a button. And then each element inside we set pointer-events: none so JavaScript will not fire on the children.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.wrapper.list {
  grid-template-columns: 1fr;
}

For the main part of this project we tell the wrapper to display: grid and then we define our grid template as: 1fr 1fr which means it will have two columns. That's as easy as CSS Grid` is!

Then if it has the .list class we tell it the template is 1fr, which is only one column.

Switch between one and multiple columns with JavaScript

So to make the switch between the grid and column view, we leverage pure JavaScript. We are adding eventListeners on our buttons and add or remove the list class from our wrapper element.

So with this code you add or remove the class from the wrapper element. Therefore you can switch between the multi-column view (grid) to the list view.

See the code example in this Codepen

Have a look at the JavaScript code and play with it here:

See the Pen CSS Grid-List view toggle by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

CSS Logos: Figma logo

29 Mar, 2022 ยท 3 min read

CSS Logos: Figma logo

CSS art sucks

28 Mar, 2022 ยท 3 min read

CSS art sucks

Join 1372 devs and subscribe to my newsletter