Mar 6
Loading video player...
If you think CSS Grid is just about rows and columns, this lesser-known trick will change your mind. Most people use CSS Grid for the basics, but this technique takes it to another level. 👉 *CSS Grid 101* https://www.youtube.com/watch?v=xR23ktLwvrg&list=PLehZRc1z6b6HkfhqouM4wH4-peS7KBjP1 Ever wondered how to place an element inside a CSS Grid even when it’s not a direct grid item? That’s exactly the trick we’re uncovering in this video. Most developers overlook this powerful feature of CSS Grid, but once you see how absolute positioning works differently inside a grid container, it’ll change the way you structure layouts. We’ll walk through a real-world example step by step, showing how to keep your HTML semantic and clean while still aligning content exactly where you want it, without touching JavaScript. Whether you’re building a team section, service grid, or any complex layout, this CSS Grid trick will help you create smarter and more flexible designs. Live Demo: https://codepen.io/optimisticweb/full/dPXWLxx Related Topics ----------------------------------------------------- - The CSS Grid Shortcut for Complex Layouts - Place Non-Grid Items Like a Pro With CSS Grid - Learn CSS grid the easy way Chapters ----------------------------------------------------- 00:00 Intro 01:09 Working with CSS grid 03:56 The hidden feature of the CSS grid Subscribe and never miss a beat ----------------------------------------------------- 🔔 Subscribe for more videos like this: https://www.youtube.com/@OptimisticWeb?sub_confirmation=1 Learn at your own pace ----------------------------------------------------- - HTML - https://www.youtube.com/playlist?list=PLehZRc1z6b6Gjiz-At0zmnpUMm5g25CQg - CSS - https://www.youtube.com/playlist?list=PLehZRc1z6b6Fu0H0iwtfiJyQBpB9S8Nfm - CSS Grid Layout - https://www.youtube.com/playlist?list=PLehZRc1z6b6HkfhqouM4wH4-peS7KBjP1 - CSS Masking - https://www.youtube.com/playlist?list=PLehZRc1z6b6HyKgP7X_uAb0L5yx8W8FDJ - JavaScript - https://youtube.com/playlist?list=PLehZRc1z6b6G0GS6HMDgAODX-jt2CvLR6 Connect, share, and grow ----------------------------------------------------- - YouTube: https://www.youtube.com/@OptimisticWeb - Bluesky: https://bsky.app/profile/optimisticweb.com - X (Twitter): https://twitter.com/optimisticweb - Instagram: https://www.instagram.com/optimisticweb - Facebook: https://www.facebook.com/optimisticweb - CodePen: https://codepen.io/optimisticweb #css #cssgrid #cssgridlayout #frontendtutorial #csstricks #frontenddevelopment #webdevelopment #csstips #cssforbeginners #learncss #optimisticweb