Great and straight forward)) Is there any way to center the last element by default if the count of items in the last line is less than in all previous?
Thank you! I don't think there is a default way to keep the last hanging item center-aligned because that'll break the sole purpose of the grid. But, if you're okay with losing the flexibility, you can target the item specifically and place it wherever you like or use the flexbox.
Without having that tested, but there could be a way by using :nth-of-child(). Depending on flex or grid, what's being used you can set the width, change flex-basis: 100% or flex grow to 1. It needs a bit of troubleshooting, as said, just straight from my mind ;-)
Thanks for sharing the idea! But, flex-basis and flex-grow will work with the flex container, where we can use justify-content for the center alignment of the last item. There are some hacks using the nth-child pseudo-class for the grid layout, but as I said, we'll have to compromise with the flexibility.
Container queries work with both mobile-first and desktop-first approaches - it all depends on how you write your CSS. This example is based on mobile-first, but you can easily switch to desktop-first, just like with media queries.
The best video I've seen about container queries so far. Well explained, straight to the point.
Thank you! Appreciate your feedback.
Simply the best🎉.
THANK YOOOOU🙌🏾.
Glad you liked it!
simplistic yet effective approach to responsive layouts, your videos are becoming a must-watch for me. I wish you were a backend instructor as well.
Thank you! The goal is to keep videos short and simple. As for the backend - I'll leave that to the pros behind the scenes 😊
Thank you sir
You’re welcome!
Great and straight forward)) Is there any way to center the last element by default if the count of items in the last line is less than in all previous?
Thank you! I don't think there is a default way to keep the last hanging item center-aligned because that'll break the sole purpose of the grid. But, if you're okay with losing the flexibility, you can target the item specifically and place it wherever you like or use the flexbox.
Without having that tested, but there could be a way by using :nth-of-child(). Depending on flex or grid, what's being used you can set the width, change flex-basis: 100% or flex grow to 1. It needs a bit of troubleshooting, as said, just straight from my mind ;-)
Thanks for sharing the idea! But, flex-basis and flex-grow will work with the flex container, where we can use justify-content for the center alignment of the last item. There are some hacks using the nth-child pseudo-class for the grid layout, but as I said, we'll have to compromise with the flexibility.
@@OptimisticWeb yes sir
👍
is this the mobile first approach because I do have trouble with this
Container queries work with both mobile-first and desktop-first approaches - it all depends on how you write your CSS. This example is based on mobile-first, but you can easily switch to desktop-first, just like with media queries.