Advanced Positioning in CSS Grid
A practical, in-depth guide to positioning elements on CSS Grid exactly as you want.
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.
Chapters
- 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
