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:

About the author

Bramus is a Freelance Web Developer from Belgium. 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 …)

Leave a comment

Your email address will not be published. Required fields are marked *

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