GridLesson 313Free preview

List Grid View

This lesson is part of How To · All levels

Summary

The list/grid view button allows the user to choose a more concise list view or a more visual grid view. JavaScript just adds or removes a class on the container, and then CSS resets the layout. Save user preferences in localStorage so that the view remains the same when the page is reopened.

Key points

One container holds the same item for both modes
The class on the container determines whether the item is arranged as a list or grid
The toggle button updates the class and status of the aria-pressed
LocalStorage can store user view preferences
Make sure both modes remain responsive and easy to navigate

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.