One Line Of Code By Master CSS
ฝัง
- เผยแพร่เมื่อ 24 พ.ย. 2024
- In this video, with the topic One Line Of Code CSS By Master CSS, I will share with everyone a particularly impressive line of code used in the layout, with the power to surpass grid and flex in CSS. And more specifically, this CSS property is also automatically responsive.
Full Series CSS Tutorial: • CSS Tutorial
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
Is the video too short? If you find it interesting, don't forget to like and subscribe to watch interesting videos about programming and web design.
Bro can you please add something from 3js ... plzzz and animated related content..
Your videos are amazing and can you please bring some 3js content as well for animations...
@@anshikatripathi3466 thanks 4 you correction 🙄.
@@lundeveloper perfect length. Right to the point with no rambling
column-width:20em;
Should do the same thing
bro is curing my mental health
Like a miracle 😍
@@lundeveloper Miracle Worker😅😅
Wow this is impressive! Years of CSS development and I never knew Masonry layout could be done that easily! Mindblown!
its new css feature supported only by latest browsers. thats why we did not know this before. the video forgot to said this important information
@@jomoc6112 No, it’s not new. This feature has been around for at least 10 years, and it wasn't designed for masonry layouts. It also has accessibility issues. However, a proper way to achieve this in a single line is expected to be available within 1-2 years.
@@t-m-rwhat are the accessibility issues?
Bro is casually improving my skills 😢
That's great. 😍😍
Likeee😂😂😂😂😂😂
Facts!
you mean robot?
@@datastatacian anyways, I felt better after that 🤣🤣🤣🤣
the funny thing is, that I encountered that type of problem about 2 weeks ago, struggled to somehow fix this and gave up on doing flex + media queries to split it into multiple cols when needed. That's a wonderful thing to know now.
The main issue with this is that images are not ordered "correctly"
Instead of showing the first images at the top of the list it orders them form top to bottom in the first column, and then it shifts to the next one in the next column, meaning the first top images in the following columns will not be the first images on the list, despite that is a cool workaround when order is not crucial, great work!
what would be the easiest way to order them vertically/horizontally?
Exactly, useless in real-life usages
@@lucasfranco1758 I don't think there's a way to do it with only css right now, since the order depends on the height of the elements. You can use a library like masonic or masonry-layout, or use javascript to reorder the elements
Additionally, it has very low browser support so it's not usable rn
@@ben-brady It's showing browser compatibility across the board..
You youngsters have it so easy.
When I started with webdesign and development in 2013 when HTML5 and CSS3 was barely adopted and responsive webdesign was at it's emerge I CRAVED for such a feature. I remember hacking something together with CSS floats and dozens of lines in JS, calculating height, width, columns etc. Now it's finally there in a simple single line of code. I can die in peace
Probably the best css tricks I’ve seen in many years.
It's really just one line of CSS code
ok but can you do that in minecraft also?
We need videos like this daily, this is just too awesome.
Nice solution if the order of the cards is not important. thx
Nawhh I was literally just making a casting pics gallery for my actor portfolio website, yesterday. Now this shows up in my recommend! I cropped all the images to different sizes to intentionally get this collage looking effect, only to realize it's harder to code than I expected. My first approach was to use three grid columns, too. This helps massively!
Every each video made me realize how much there is to learn.
I'm glad it was useful to you 😊
same thing
This would be a perfect solution if the order of images, whether vertical or horizontal, does not matter.
The problem with this solution is when you wanted to order the images horizontally. If you can notice in the flex or grid method, the order of the first three images are horizontally laid. When it comes to the columns method however, the same images becomes ordered vertically.
I think fixing this issue would involve using javascript to reorder elements/swap rows and columns. But there might be another set of problems for making it responsive lol. I'll think about it next time 😅
Btw, great video as always!
🤯You are god of css
This is top tier teaching right here. GODAMNNNNN.
Video is not too short.
The video is exactly perfect time.
In one line :
Man, you’re the best!!!
Thank you! So refreshing, I am younger 5 years now! 😊
I was thinking about my next projects, and this is what I wanted to do, u are amazing bro!
It's great that this video is out there right when you need it ❤
I just love this channel funny enough just few days ago i was just telling a friend that i needed to learn this masonry layout (didn't even know what it was called at the time). I tried Both Flex and Grid but couldn't achieve the layout. I manipulated my way around it but it wasn't efficient. Long story short you've just improved my skill and made me a better developer Big thanks to you.
However the proposed masonry layout will be from left to right - columns are up down to the next column. In some cases this matters - in some, like yours, the direction of flow does not matter.
amazing! i can remember first time when I solve this problem I don't know I used almost 200 lines of ungodly javascript and I love the way it's working cuz we always need to add JS to make remaining space divided equally but not anymore.
You got a new subscriber bro. I have started my web dev journey literally 10 days ago, and Still I am finding your videos helpful.
Masonry layout has always been a problem to me. There are entire libraries to handle this layout, I didn't know this was that simple. Thank you!
as a backend dev I find it fascinating that you can do that in CSS, great stuff!
Dude I've been looking for this tutorial for months!!! Thanks dude!
great video, it's feels like
"hey I've seen this one. this is a classic"
5 Minutes. 3 different ways with cons and pros. Wow.
(Thanks! ❤)
What's crazy is that I was thinking this one was a very recent feature that probably isnt supported in many places.
However, it's pretty much supported everywhere. I am mind-boggled why this is the first time I came across this.
Thanks!
To answer your pinned comment: the video is just the right length with enough information.
Thats crazy, right ? 😍😍😍
same here mate
Thought exactly about it, very impressive
Bro is reviving my interest in web dev 😂
Bro, I didnt search for this but this is gold. Thanks!
Again, the best channel for CSS tips and tricks in details. A lot of hours long courses don`t teach the little things and you are doing it, so its awesome. You are great!
Thank you brother 😍
Man, you are the best web design yt for real, terrific work, keep it up
I have been looking for this for a long time until I gave and realized it's no way. 😁 I just saw this today by chance. Thanks for the helpful content. ❤❤🎉
I have subscribed just watching 2 videos that came on my feed randomly. And you have earned it!
Thank you brother 😍❤️
And I was just struggling with making Masonry yesterday, you're a genius.
I been looking for this for 4 years, thanks
Dude u cured my trauma about learning css perfectly 😢😢😢😢❤❤❤❤
Wow! I've tried it with Tailwind CSS, and it completely transformed the vibe of the webpage-thanks, man. I love learning tricks and tips like this; please share more.
As some people already have mentioned, the ordering causes issues. A lot of the time masonry layout is used with infinite querying to load more images/content. This causes a reordering of the layout and doesn't position the elements correctly.
Only useful if you have static content with masonry which is kind of rare.
trong tất cả kênh hướng dẫn CSS cao cấp thì em thấy channel này là hay nhất
Cảm ơn em nhá 😍
Oh. My. God.
I avoid CSS but tomorrow i'll dive headfirst into it all because of you!!
This is huge, I been struggling with this type of layout for months.
Glad this video was useful to you
Whole new level of css for backend engineer who do something front end
Oh my god, nothing excites me like this kind of things, which i did not know, i'm genuinely happy. GJ sir
Take my sub!
Your content is rare gold.
Looks like i am watching coding anime 😂❤
Nice idea. Masonry grids still have accessibility issues because the tab navigation can be different to what you would expect.
Thank God I came across your channel,you're a genius
Thank you for watching my content ❤🔥
SCSS safe my live. but this guy content make me level up.
You are original and that why the peopple follow you, PD I like the gas/winds. Greetings from Argentina
Bro you increased my interest in CSS also
damn those soundeffect are masterpiece
Great video, simple explanation, very good.
Great tip, columns never got the love it deserved when it came out nearly two decades ago. Wonder if you can use a gap property like in grid/flex.
Dude I needed this in work!! Thanks
Thank you so much for this tutorial. This just pooped up in my YT feed at the right time. 😎
THANK YOU, big fat THANK YOU!! I'll implement that in future projects!
This is beautifully efficient. Bravo. 👏
Bravo. 👏 😁
This is crazy. Thanks for the tip. I’m gonna use it on my gallery page.
bro helps me keep my sanity while doing webdevelopment
congrats on 100k!
first time watching u
and i like it!
Thank you so much brother 😍
If you have a list that has 20 items, how do you prevent content inside the from flowing into the next column?
Try setting it to display: block instead of inline-block :)
You are always show coll and useful css tricks. Thank you. Wish you more subscribers!
Just subscribed because of the sound fx because I already knew about columns in css.
Great tutorial tho 👍🏻
I was searching this . Thank you
I subscribe your channel right away. Crazy and easy to understand your explanation 🐐
0:50 thought about subscribing 1:08 subscribed
Bro loved it you earned a new subscriber ❤
Greetings from Yemen , u have a unique content , ty for that
Thank you so much brother, love Yemen
Generally in masonry layouts, you want the "first" elements in the list nearest the top. This method stacks things sequentially, so the 3rd item from the left might be the 400th item in the list. The stacking can also look "off" if the object sizes vary a lot. It's cool though, I've used it before.
Thanks dud i always wonder how this works and finaly i get to see it with simple code 😊
😊
Watching this and you're on exactly 100k
Yoo this is mind blowing🎉🎉
That was actually helpful. Thanks
Great bro ❤, keep sharing your experience and knowledge 😁
I am super glad i watched this video ❤
this is the best ever .
So may thanks
Thanks brother 😍
I needed you 2 years ago
Lifesaver ❤
I remember back in 2010, the struggle to make a simple layout and hacks to support browser compatibility 😭 it was a pain in the heart 💔
What a customized environment ✨
...
I love if you share the customization video for VS code brother ❤.
JESUS! THANK YOU FOR SHARING!!!
😍
Bro is an angel😃😍
Bro spawned in with what I was struggling with the most
This is pure gold. If not too much to ask, I'm currently working with large lists and container-visibility, however, performance got worse than not using it in a list of 1000 elements. Would you be able to provide some insight on why and what to do to solve it?
First thank you for the gift.
answer the question: In fact, when you use container-visibility in a list with too many elements, it will cause layout and rendering calculations to take place continuously, which will make the website lag, poor performance.
Normally, with large lists, programmers will not use container-visibility, the two most popular options are paging or using Lazy Loading.
Oh god i'm creating a small website builder app, this is so gonna be helpful for the themes. Thanks 😭
Absolutily amazing trick!
🤯wow, that’s amazing.
i am still watching ur videos cuz they are awesome
Astonishing!
You appeared on my front page randomly, and it piqued my curiosity. Good content. 👍
Enjoy your well earned sub (though you're now above 100k subs)
I like your videos. Very helpful and I have learned a lot even though I have 17+ years of experience (mostly in the backend).
Thank you very much, it's nice to receive appreciation from experienced people 💖
Excellent video thanks bro
Thank God i found this channel
Thanks for watching my content 😍
No problem sir. But please where do you get images like the once you used in this video?@@lundeveloper
this is so helpful thank you for this type of Content,
Thanks for watching my content ❤️
whoa. made me subscribe. good content
bro WHAT i overcomplicated this SO MUCH in comparison, thank you for sharing! I watch your channel since the beginning and I am so glad that you are consistent with the quality. Also, thanks for changing the AI voice! I didn't like the old jimmy alike voice, even more since all that stuff about him went public. Cheers!
Cool tech brother, leaving my sub!
excellent, right to the point