Uploaded July 2023 | Updated September 2026, 2 hours ago
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
Demo: codepen.io/ZoranJambor/pen/zYMKady
In-depth guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Chrome DevTools Tips: youtu.be/W7GQglXn-jQ
📖 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:
💌 css-weekly.com
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #cssgrid
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
Demo: codepen.io/ZoranJambor/pen/zYMKady
In-depth guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Chrome DevTools Tips: youtu.be/W7GQglXn-jQ
📖 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:
💌 css-weekly.com
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #cssgrid
