Advanced Positioning in CSS Grid

A practical, in-depth guide to positioning elements on CSS Grid exactly as you want. You'll find out how grid-row and grid-column work in detail by recreating an interesting, creative layout from scratch.

🔗 Links

📖 Timestamps
00:00 Intro & Setup
00:45 Setting up CSS Grid with 12 Columns & Rows
03:19 How to work with Grid Inspector in Chrome DevTools
04:38 How grid-column-start and grid-column-end work
05:32 How grid-column “span” keyword works
06:19 How grid-column shorthand property works
07:10 How grid-row shorthand property works
08:01 How to stretch an element to full size of the grid area
08:46 How to use object-fit property to fix distorted images
09:34 How to position image within object-fit boundaries using object-position
10:20 How to position content within the grid area using align-self and justify-self
12:53 Position the headline element on the grid
15:12 Position the text element on the grid
15:59 How grid-gap property works
16:57 Position the social media icons element to the edge of an image
18:25 How to remove extra spacing from the bottom of images
18:55 How to change the grid layout on smaller screens
22:18 Conclusion

Subscribe to CSS Weekly Newsletter:

Course Mastering Prettier & Stylelint
🏷️ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor
#css #cssgrid

[sakarsr]

Realy neat way of showing the grid layout. Thank you and good health. So more complicated grid layouts.

[akwright]

This is fantastic, thank you so much for sharing! You explain things very well and your video production quality is excellent.

[kelindrawn]

Since the grid is a direct child of body we could also use container queries instead and it would look the same, correct?
With this we could, for example, reuse this element and put two children next to each other (assuming the parent is still 100vb). Thanks for the video!

[thedacian]

Could you explian, please how absolute positioning works within grid?Thaks!

[jenstornell]

In 99.999% of the time, this kind of layout is done with position absolute. I much prefer the grid version and consider position absolute to be almost an ugly hack.