@KevinPowell
  @KevinPowell
Kevin Powell | Power-up position absolute with this simple technique @KevinPowell | Uploaded August 2023 | Updated October 2024, 8 hours ago.
Sometimes we need to use position absolute, but then we often end up wading into the world of magic numbers, and they are always the worst, so in this quick video I take a look at how we can get more control with position absolute by using it with Grid.

πŸ”— Links
βœ… The original video: youtu.be/khjVPkO35F0
βœ… Layouts that work better with Grid: youtu.be/r1IitKbJRFE
βœ… Getting started with Grid: youtu.be/8QSqwbSztnA

⌚ Timestamps
00:00 - Introduction
00:23 - Why magic numbers are the worst
02:10 - Turning on the grid
02:45 - Make sure the containing block is the grid container
03:41 - Using position absolute with grid rows and columns

#css

--

Come hang out with other dev's in my Discord Community
πŸ’¬ discord.gg/nTYCvrK

Keep up to date with everything I'm up to
βœ‰ kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
πŸ“Ί twitch.tv/kevinpowellcss

---

Help support my channel
πŸ‘¨β€πŸŽ“ Get a course: kevinpowell.co/courses
πŸ‘• Buy a shirt: teespring.com/stores/making-the-internet-awesome
πŸ’– Support me on Patreon: patreon.com/kevinpowell

---

My editor: VS Code - code.visualstudio.com

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Power-up position absolute with this simple techniqueThe only tags you need when first learning HTMLUse this instead of media queries or container queriesKeeping up with CSS: The features released in 2023A simple CSS solution to select ranges of contentDynamic horizontal scrolling based on the amount of contentNo, Flexbox isnt good enoughCreate an animated, circular progress barUnder-used CSS features 3: matrix-3d()The big gotcha with native CSS nestingFlex: 1 probably doesnt work the way you think it doesA simple way to make a masonry layout

Power-up position absolute with this simple technique @KevinPowell

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER