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
Смотрите видео Advanced Positioning in CSS Grid онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CSS Weekly 17 Июль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,614 раз и оно понравилось 214 людям.