CSS Grid trick that’s worth remembering

Love love loveee this.

Remembered this vid cos I had trouble with position-absolute trick. Much easier, much better.

❤️❤️

Haha, greatest tip of the day for me. After fighting with multiple mask div, positions and z-index this become trivial 😀

im seriously getting to love grid as my current project is a housing management system.

what if I have more than 1 element inside and want to center it all respecting the flow?

Man fuck html

why not give class staked background-img?
then display justify and align center

I’ve been watching his videos for a while and only now i realized i wasn’t subscribed😅

I'm 🔙

If we can build websites using html & CSS for which part of the website do we need Js for?

Very nice loop! :3

That's genius! I love grid now actually

.parent-div {
Display: grid;
Place-content: center;
Height: 100vh}
Now you have vertically centred content 🎉

Whats the disadvantage of using absolute positioning?

That's a fkg fine loop

Now, how you center div

What an unbelievably good timing for this one to pop up...
I don't care if this is the "right" way of doing it, it works and that's all I care about

Oh my! Kevin. Is this real? Wowza!! 🎉

Dude pls low the resolution I can see your soul and I don't like it XD

What’s wrong with using position absolute? It’s much simpler.

Only problem is totally breaks printing, so don't use it with printing as page breaks don't work inside grid or flex.

🔥

I hate it for centering, witch is not centering as we thinking ;)

man this is the longest short ive ever watched. cant wait to see how it ends.

Very cool ‘why’ loop

Which ide you used in this video

Infinite loop

What is your VS code theme?

I love your videos

Never thought of using grid for a case like this before. Absolutely brilliant. Mind is blown, thanks!

Incredible

Been trying this with a video element as background and I can't get it to work :'(

What does grid-column: 1/-1 and row: 1/-1 do? I tried altering the values, but got no result (tried on codepen)

html
<div class="stacked"> <h1>Content on top</h1> <img src="" alt=""> </div>
css
.stacked{ display:grid; }
.stacked > *{
grid-column: 1/-1;
grid-row: 1/-1;
/* alternative
grid-area: 1/1; */
}

nonononooooo, too perfect loop. stop doing thaaat

I can't understand this span stuff 1/1 this notation is quite confusing

THANKS A LOT KEVIN! This makes GatsbyImage a lot easier to use as a background! Thanks!

Oh osm I see somewhere else but didn't understand but now im. Thanks 👍🏻.
and can you make more example shorts on grid

You’re bloody good Kevin, great tip

Which is whyyy.. took me a second!!

I see what you've done with the script at the end. :D

"..which is why..." You are getting very good at these shorts Kevin. 😆

Loop failed successful 😔

I hate shorts so much, can't even save these to a playlist

I love CSS

what theme is he using? looks very nice

The image/media is logically interpreted as a background, in which case it may be better to declare it before the content in the html code, so that the z-index + isolate can be omitted to take advantage of the normal flow of the document.