Advanced Positioning in CSS Grid

Рет қаралды 4,466

Күн бұрын

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/zY...
In-depth guide to CSS Logical Properties: • In-Depth Guide to CSS ...
Chrome DevTools Tips: • Chrome DevTools Tips -...
📖 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 KZfaq15 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: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssgrid

Пікірлер: 21

@akwright Жыл бұрын

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

@CSSWeekly Жыл бұрын

Thank you so, so much, Alex! 🙏 I'm thrilled to hear that my explanations are clear and that you think the production quality is excellent! ❤️

@sakarsr Жыл бұрын

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

@CSSWeekly Жыл бұрын

Thank you so much for your kind words, Sakar! This means a lot! ❤️

@inteltone Жыл бұрын

Thanks for the video! Very useful.

@CSSWeekly Жыл бұрын

Thank you so much for watching and commenting! 🙏

@Thayuczzi77 10 ай бұрын

Gracias, exelente contenido..

@CSSWeekly 10 ай бұрын

Thank you so much, I'm thrilled to hear this! 🙏

@DmitrydbaikBashkatov Жыл бұрын

nice job!

@CSSWeekly Жыл бұрын

Thank you so much Dmitry! It means a lot! 🙂

@JeffKlunder 11 ай бұрын

Nice video 👍

@CSSWeekly 11 ай бұрын

Thanks so much, Jeff! I appreciate it! 🙏

@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!

@CSSWeekly Жыл бұрын

Yea, precisely! This feels more like a page layout than a component, but I guess container queries can be used almost everywhere with a nice upside. 🙂 And container queries are something I will explore in depth in one of my next videos. Such a game-changer! 🙂 Thanks for the insightful comment! 🙏

@thedacian123 Жыл бұрын

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

@CSSWeekly Жыл бұрын

Thanks so much for this fantastic question, Alex! 🙏 I'm not sure, to be honest. I will dig into it and create a video on the subject. 🙂

@user-tt7hm4do1i 11 ай бұрын

👏👏👏👏

@CSSWeekly 11 ай бұрын

Thank you so much! 🙏

@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.

@CSSWeekly Жыл бұрын

Excellent observation, Jens! 👏 Before CSS Grid, this would only be possible with position absolute, but it seems that people today often go down that route instead of using CSS Grid. Perhaps out of habit, or lack of understanding, but your assesment that this seems like "an ugly hack" is spot on. 🙂