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: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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!
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👍👍
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.
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 👍
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
Hello Dave , is setting column-width to 25% for 4 columns for 4 p elements a good option since I tried that and It was really helpful as it was showing each p element in its own column without overflowing to next column and we can also put h2 for each p element and with break before column it will look good and if we do not want to give header to any p element then we can just type anything and put both the background color and color as white.
sir my question is that why you uses quotation mark from the browser instead from the keyboard quotation button as it is also working. Is there any reason for it. just confuse in it.
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.
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: ua-cam.com/video/EaWj2AWI5Es/v-deo.html
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?
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. 🚀
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.
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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!
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
I finally made it to Columns and It is becoming real tough :)
This was a wild one. I think 3 tuts for me a day is enough.
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! 🙏🙏
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.
Great video as always Dave, thanks a lot. Btw, The Big Lebowski is a must watch 😄
Thank you, Gabriel - and I agree! 💯
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: ua-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html - More to come! 🚀
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 👍
I didn't know specificity matters that much until this video 😂😂
From one Kansan to another, very nice work!
Thank you, Jon! 🙏 I hear we're in for *another* windy 💨 one today
Really ,your way of teaching is amazing ,and has more informations.keep going thank you so much
Thank you for the kind words! 🙏
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
Thanks Dave ❤
Thank you, Dave
Thank you. I haven't seen that anywhere
Fantastic course so far!❤
Glad to hear that!
That rug really tied the tutorial together.
@@ZakkFromSource 😂
Hello Dave , is setting column-width to 25% for 4 columns for 4 p elements a good option since I tried that and It was really helpful as it was showing each p element in its own column without overflowing to next column and we can also put h2 for each p element and with break before column it will look good and if we do not want to give header to any p element then we can just type anything and put both the background color and color as white.
That's a nice dutorial, man.
Thank you for this very quality content.
You're welcome!
sir my question is that why you uses quotation mark from the browser instead from the keyboard quotation button as it is also working. Is there any reason for it. just confuse in it.
Very useful tutorial thank you
You're welcome, Sona!
Really a useful content👍
Glad to hear that!
12:15 Setting the h2 styles as
break-after: avoid;
break-inside: avoid;
seems to solve that problem.
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.
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: ua-cam.com/video/EaWj2AWI5Es/v-deo.html
sir what are the values of column span without all plz tell me in detail. i mean how to use it on just 2 column out of 3 column.
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?
Sir can you please give name of web site for unicode character table that you are using in this vedio 😅
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. 🚀
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.
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.
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.
Just when you were thinking you can not like Dave Gray more.... and hop.... He likes not just tacos but The Dude too..... :)
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.
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.