CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows

Recently I saw this tweet float by:

Now that sounds like a job for CSS Grid to me!

See the Pen CSS Full-Height Slideshow with Centered Slides by Bramus (@bramus) on CodePen.

The code is documented, yet the key part here is to:

  1. Use grid-auto-rows: 100vh (or soon 100dvh) on the container to place the children inside rows of 100vh each.
  2. Use place-items: center; on the container to center the items themselves inside their assigned row.

Because we’re using grid-auto-rows, the code will work with any number of direct children in the container.

~

πŸ”₯ Like what you see? Want to stay in the loop? Here's how:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.