CSS Toggle grid or List view

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 permalink

<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 permalink

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 permalink

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! permalink

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