CSS Grid Layout Slideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

By Manoela Ilic in Playground on
Demo Code

Today we’d like to share a little slideshow with you that is powered by CSS grids. The idea is to have several images shown in an artsy way and apply a different layout for each slide. We also play with a reveal effect where we show and hide the items when navigating between the slides.

Attention: We are using a couple of new CSS properties like CSS variables and the new CSS grid layout which won’t work in older browsers.

For the last demo, we also use a mix-blend-mode on the image grid items on hover.

For the different grid layouts we set an individual grid-area to each item. This allows us to specify exactly where we want each item to start and end. The grid-area property is a shorthand for the four edges (row start / column-start / row-end / column-end):

[row-start] (first)[row-end] (third)[column-end] (fourth)[column-start] (second).item

Read more about CSS Grid in our CSS reference entry written by Hui Jing Chen: A Complete Guide to CSS Grid

This demo is kindly sponsored by dapulse, the visual project management tool.

Have a look at the different layouts and styles of the slideshow:

GridLayoutSlideshow01

GridLayoutSlideshow02

GridLayoutSlideshow03

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this experiment and find it useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Building an Interactive Sparkline Graph with D3

Layout with Reveal Animations and Content Preview

Fullscreen Clip Animation

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 25

Comments are closed.

    • Seriously she should write an article about how she does stuff and where does she learns it from

  4. Oh. My. God! Thank you so much for this article, I was looking for something like this for ages, but didn’t know how to even call it to find any info. Gotta go try implement this design immediately. This is simply brilliant.

  7. Hi Manoela,
    This is a really nice and creative way of presenting a gallery, but, to be honest, I miss one (IMHO) decisive step for it to be perfect 🙂 – i.e., after flicking through the gallery, being able to select a particular image and enlarging it by clicking on it. If anybody knows a rather simple solution to that effect, I would be grateful for a tip!
    BTW, Manoela, thank you so much for your always enjoyable and inspiring blog posts!

    • This is solvable with a bit of JS knowledge and the know-how to use an external plugin. Lightbox is the term you’ve been looking for! 🙂

    • Hello! Andi, how would it be implemented? Because the loading of images is in the css and I can not put links in the html.

  9. This is so great! I just can’t believe that someone could come up with these ideas!

  10. Great article, Mary Lou! There are really some trick elements happening here. In the right application, these can be a real show stopper. It is a very particular client that it will work for, but when it does, it is matchless in intrigue. We have seen these sites to be pretty inconsistent in their mobile functionality, but this will undoubtedly work itself out in time. Thank you for putting this together!

  11. This is nice, design is good. i have a question, IS THIS AVAILABLE FOR MOBILE DEVICES or MOBILE VERSION

    Works Perfectly Fine
    Smooth Animation and effects

  12. I have got a solution from this article. I am trying to create a grid layout slideshow. I have seen demo. its amazing.

  14. I need to use it within a section of my website. But it does not work for me if not on full page. What could I do to make it work as I need it?

  15. Hi Mary Lou, I was looking for the same code and I am really happy to get your website on Google. This is really an easy code. Thanks!

  18. Good work! I have a one question… Why grid on tablet is resistant to any changes? The mobile version on the phone works fine.

  19. It’s not supported in Safari also IE please check and republic this post thanks

  20. Gosh.. learn from it – instead of begging her to fix/adjust for your needs..
    WTF is wrong with you guys? Copy & Pasting is not development..

    Oh and btw.. codrops was always cutting edge tech and rather demonstrates proof-of-concept stuff..