Skip to content

[css-grid] Grid Item Position Transitions #6736

Open
@bramus

Description

@bramus

When changing a Grid Container's grid-gap, grid-template-columns or when changing a Grid Item's grid-column, grid-row, Grid Layout will do its thing and reposition the Grid Items as space becomes available/unavailable.

Adjusting things such as grid-gap can already be done via transition/animation, but a Grid Item switching Row/Column will happen instantaneously.

See a demo such as https://codepen.io/bramus/pen/ad379eb0cb8c4e11e0eb17e3e751d58c?editors=1010 where you can alter these properties. Notice how the grid-gap gets transitions but the grid items (if too less space is available) jump from one row to the other.

The demo listed above is a fork from https://codepen.io/aholachek/pen/VXjOPB, which uses a JS-library named animate-css-grid to smoothly animate the Grid Items as the Grid changes.

This script makes it easy to transition your CSS grid gracefully from one state to another. If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition to its new configuration.

It would be nice if this kind of behavior could be achieved without any JS.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions