It is possible to easily create a multi-column layout in CSS without using flexbox or grid. In this tutorial, we will create a multi-column layout and look at different options we can use along with the columns. If you're just getting started with CSS, I recommend going to the beginning of this CSS for Beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
Some tips, you can hover over a selector in VSCode and it'll tell you the Selector Specificity :). You can also press ALT+SHIFT+F to auto-format JS/HTML/CSS too!
Could you answer to me mr dave gray? I've watched your entire html tutorial and im almost at the end of the css one. You helped me a lot building web pages. Thank you
Dave, thank you!!! I got a frontend developer job thanks to your amazing video!! I didn't know anything about programming, but your video and explanation are easy to understand. I really appreciate your hard work. You are my lifesaver👍👍
How come you had to be more specific for the quote class when previously you were targeting the h2 inside of the columns class? And just to be clear, I understand the notion of specificity in general, but I don't understand how in this case the styling wasn't being applied when the quote class is being applied to a paragraph element, not to a h2. Hopefully you understand what I mean here.
Can someone tell me why the class columns was used with the class quote? in short this part: .columns .quote { font-size: 3 rem } the 3 rem was only applied to the quote, is there a reason to put the columns class first?
I could not reproduce the problem with "h2" element at 10:46, not with firefox, firefox dev or google chrome. Seems like its not a problem anymore? Oh boy at 19:00 you opened my eyes! I mean i know about specification but i would never expect it here that way. Realy good content 👍
The only thing I find it impossible to implement without "css column" is spreading part of one paragraph in the next column, Thanks Dave, that was a great video 👍🚀
Awesome, Bing Chat suggested you when I asked specifically for a Tut on CSS Columns. I didn't like the way my restaurant menu looked in Grid where my food item cards sitting next to each other would expand to the height of the adjacent card when one has a much longer dish description. I knew CSS columns could probably do what I'm looking for. I like the way you teach - subscribed! (I use the text expander, Espanso, to add my EM DASH with the shortcut "--" prefixed with a semi colon.
Thank you sir for the wonderful course . I have a doubt that , i thought instead of using "white-space : nowrap" , I have tried " break-inside : avoid" . As per the tutorial , break-inside helps us to not split the element right ? But it is not working . Could you please clarify my query. Once again really thank you for the course sir .
MDN provides a great reference for any specific properties including both white-space (developer.mozilla.org/en-US/docs/Web/CSS/white-space) and break-inside (developer.mozilla.org/en-US/docs/Web/CSS/break-inside). These properties have very different targets: how white-space is handled inside an element vs how page, column, or region breaks are handled inside of a box.
Sir I have a doubt if you can answer that, the nowrap here in the case could also be achieved by " display: inline-block; ", so is it recommended to use that in this case and if no, then why? By the way very knowledgeable videos sir.
Often times there are more than one way to achieve the same goal. I prefer the white-space: nowrap; because that is what it is made to help with. The other approach you mention does also work. 🚀
That was such an amazing tutorial! I've got a lot new information about columns, thank you, Dave! But is there any way to make each paragraph on it's own column, without spreading?
Thank you! 🙏 Yes, you can achieve what you are asking with CSS Grid. Lesson 15 on CSS Grid shows how to quickly do this with grid-auto-flow: ruclips.net/video/EaWj2AWI5Es/видео.html
Hi everyone! Do you think it's ok if I use div instead of section as a container for the paragraphs that will be displayed in columns? This way the html file can be validated on w3c without the warning "Section lacks heading".
When you get to the project at the end of this series, you will see how I handle this. You can create a heading which helps identify your section to screen readers, and at the same time, you can move it off of the screen if you don't want to see it.
It is possible to easily create a multi-column layout in CSS without using flexbox or grid. In this tutorial, we will create a multi-column layout and look at different options we can use along with the columns. If you're just getting started with CSS, I recommend going to the beginning of this CSS for Beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
Some tips, you can hover over a selector in VSCode and it'll tell you the Selector Specificity :).
You can also press ALT+SHIFT+F to auto-format JS/HTML/CSS too!
Good tips!
Could you answer to me mr dave gray? I've watched your entire html tutorial and im almost at the end of the css one. You helped me a lot building web pages. Thank you
What are you asking? For questions, please join my Discord: discord.gg/neKghyefqh
I finally made it to Columns and It is becoming real tough :)
I didn't know specificity matters that much until this video 😂😂
Dave, thank you!!! I got a frontend developer job thanks to your amazing video!!
I didn't know anything about programming, but your video and explanation are easy to understand.
I really appreciate your hard work. You are my lifesaver👍👍
That is great news! 💯 Glad I could help! 🙏🚀
Where do you work
How come you had to be more specific for the quote class when previously you were targeting the h2 inside of the columns class? And just to be clear, I understand the notion of specificity in general, but I don't understand how in this case the styling wasn't being applied when the quote class is being applied to a paragraph element, not to a h2. Hopefully you understand what I mean here.
Just when you were thinking you can not like Dave Gray more.... and hop.... He likes not just tacos but The Dude too..... :)
Can someone tell me why the class columns was used with the class quote? in short this part:
.columns .quote {
font-size: 3 rem
}
the 3 rem was only applied to the quote, is there a reason to put the columns class first?
12:15 Setting the h2 styles as
break-after: avoid;
break-inside: avoid;
seems to solve that problem.
Sir can you please give name of web site for unicode character table that you are using in this vedio 😅
I could not reproduce the problem with "h2" element at 10:46, not with firefox, firefox dev or google chrome. Seems like its not a problem anymore?
Oh boy at 19:00 you opened my eyes! I mean i know about specification but i would never expect it here that way.
Realy good content 👍
The only thing I find it impossible to implement without "css column" is spreading part of one paragraph in the next column,
Thanks Dave, that was a great video 👍🚀
Thank you, Ahmad! 🙏🙏
That's a nice dutorial, man.
This is 😅 complicated 😂 my brain is about to explode
You will get it. No rush. Take your time and refer to the provide documentation links if needed.
Awesome, Bing Chat suggested you when I asked specifically for a Tut on CSS Columns. I didn't like the way my restaurant menu looked in Grid where my food item cards sitting next to each other would expand to the height of the adjacent card when one has a much longer dish description. I knew CSS columns could probably do what I'm looking for. I like the way you teach - subscribed! (I use the text expander, Espanso, to add my EM DASH with the shortcut "--" prefixed with a semi colon.
nice video Dave!!! would love more videos on css too apart from react stack. Thanks!
Thank you! I'm building my CSS for Beginners playlist here: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit - More to come! 🚀
Thank you sir for the wonderful course . I have a doubt that , i thought instead of using "white-space : nowrap" , I have tried " break-inside : avoid" . As per the tutorial , break-inside helps us to not split the element right ? But it is not working . Could you please clarify my query.
Once again really thank you for the course sir .
MDN provides a great reference for any specific properties including both white-space (developer.mozilla.org/en-US/docs/Web/CSS/white-space) and break-inside (developer.mozilla.org/en-US/docs/Web/CSS/break-inside). These properties have very different targets: how white-space is handled inside an element vs how page, column, or region breaks are handled inside of a box.
Thank you. I haven't seen that anywhere
Sir I have a doubt if you can answer that, the nowrap here in the case could also be achieved by " display: inline-block; ", so is it recommended to use that in this case and if no, then why? By the way very knowledgeable videos sir.
Often times there are more than one way to achieve the same goal. I prefer the white-space: nowrap; because that is what it is made to help with. The other approach you mention does also work. 🚀
That was such an amazing tutorial! I've got a lot new information about columns, thank you, Dave!
But is there any way to make each paragraph on it's own column, without spreading?
Thank you! 🙏 Yes, you can achieve what you are asking with CSS Grid. Lesson 15 on CSS Grid shows how to quickly do this with grid-auto-flow: ruclips.net/video/EaWj2AWI5Es/видео.html
Really ,your way of teaching is amazing ,and has more informations.keep going thank you so much
Thank you for the kind words! 🙏
Thank you, Dave
Great video as always Dave, thanks a lot. Btw, The Big Lebowski is a must watch 😄
Thank you, Gabriel - and I agree! 💯
1:47 why don't you just use auto format on save from the settings and disable prettier
Never slowed down to change those settings, but good suggestion! I have now removed Prettier.
Hi everyone! Do you think it's ok if I use div instead of section as a container for the paragraphs that will be displayed in columns? This way the html file can be validated on w3c without the warning "Section lacks heading".
When you get to the project at the end of this series, you will see how I handle this. You can create a heading which helps identify your section to screen readers, and at the same time, you can move it off of the screen if you don't want to see it.
@@DaveGrayTeachesCode Awesome! Thanks for answering and for this amazing tutorial. That's very generous of you.
Thanks Dave ❤
Thank you for this very quality content.
You're welcome!
From one Kansan to another, very nice work!
Thank you, Jon! 🙏 I hear we're in for *another* windy 💨 one today
columns overlap eachother for me
Compare your code to the code available at the course resources link in the description. Also consider your screen width and then column width.
Very useful tutorial thank you
You're welcome, Sona!
Really a useful content👍
Glad to hear that!
Fantastic course so far!❤
Glad to hear that!