GridLesson 312Free preview
Expanding Grid
This lesson is part of How To · All levels
Summary
An expanding grid is a collection of grid cards that either enlarges when selected, touched, or focused. This effect gives room for additional detail without opening a new page. Implementation can be done using CSS transitions and active classes that add JavaScript, or column and row span manipulation.
Key points
- Each card can be assigned an active class when clicked or focused
- Enlarge the card with grid-column and grid-row span or transform scale
- Use transition to make the change of size feel smooth.
- Provide keyboard support through the button element and:focus-visible
- Limit the number of cards open so the layout doesn't mess up.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.