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
Demo: https://codepen.io/ZoranJambor/pen/zY...
In-depth guide to CSS Logical Properties: • In-Depth Guide to CSS Logical Properties
Chrome DevTools Tips: • Chrome DevTools Tips – Styles Pane & ...
📖 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:
💌 https://css-weekly.com/
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: https://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: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor
#css #cssgrid
Auf dieser Seite können Sie das Online-Video Advanced Positioning in CSS Grid mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CSS Weekly 17 Juli 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,614 Mal angesehen und es wurde von 214 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
