This content originally appeared on Bram.us and was authored by Bramus!
Recently I saw this tweet float by:
CSS experts, I need your help! 👇
I need a container that vertically centers its children and that can be scrollable if necessary.
It should be a single container. Not 2.
<div class="container">
<item>Vertically centered</item>
<item>Vertically centered</item>
</div>— Álvaro Trigo 🐦🔥 (@IMAC2) September 24, 2021
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:
- Use
grid-auto-rows: 100vh(or soon100dvh) on the container to place the children inside rows of100vheach. - Use
place-items: center;on the container to center the items themselves inside their assigned row.
Because we’re using grid-auto-rows: 100vh, 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:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-11-04T14:06:02+00:00) CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows. Retrieved from https://www.scien.cx/2021/11/04/css-full-height-slideshow-with-centered-slides-thanks-to-grid-auto-rows/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.