CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox

[@DaveGrayTeachesCode]

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: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@doinkstr]

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!

[@DaveGrayTeachesCode]

Good tips!

[@코린이31세]

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👍👍

[@DaveGrayTeachesCode]

That is great news! 💯 Glad I could help! 🙏🚀

[@KaimanGod]

Where do you work

[@konstantinzakharov5643]

I finally made it to Columns and It is becoming real tough :)

[@ahmad-murery]

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 👍🚀

[@DaveGrayTeachesCode]

Thank you, Ahmad! 🙏🙏

[@NorthTonawanda1]

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.

[@Testurteil20]

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 👍

[@arsyaswanth5]

nice video Dave!!! would love more videos on css too apart from react stack. Thanks!

[@DaveGrayTeachesCode]

Thank you! I'm building my CSS for Beginners playlist here: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit - More to come! 🚀

[@blastofffpv]

That's a nice dutorial, man.

[@TeomunMete]

Thank you. I haven't seen that anywhere

[@GabrielSouza-yy2rq]

Great video as always Dave, thanks a lot. Btw, The Big Lebowski is a must watch 😄

[@DaveGrayTeachesCode]

Thank you, Gabriel - and I agree! 💯

[@TravinskiyVladislav]

Thank you, Dave

[@insteresting]

12:15 Setting the h2 styles as break-after: avoid; break-inside: avoid; seems to solve that problem.

[@jonkeck7489]

From one Kansan to another, very nice work!

[@DaveGrayTeachesCode]

Thank you, Jon! 🙏 I hear we're in for *another* windy 💨 one today

[@yadyad3832]

Really ,your way of teaching is amazing ,and has more informations.keep going thank you so much

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@IG7799-c4u]

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.

[@anjaneyulub2529]

Thanks Dave ❤

[@xxkaisooxx874]

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?

[@kaberanshutisamuel1856]

I didn't know specificity matters that much until this video 😂😂

[@stormbytes]

Fantastic course so far!❤

[@DaveGrayTeachesCode]

Glad to hear that!

[@AnubhavSingh-nb3bt]

Sir can you please give name of web site for unicode character table that you are using in this vedio 😅

[@MrJettann]

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?

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/e5K6m2V3jK5oe9U

[@maelsito_was_taken]

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

[@DaveGrayTeachesCode]

What are you asking? For questions, please join my Discord: discord.gg/neKghyefqh

[@detailsstudio21]

Thank you for this very quality content.

[@DaveGrayTeachesCode]

You're welcome!

[@meetmehta2730]

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.

[@DaveGrayTeachesCode]

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

[@sonamohialdin3376]

Very useful tutorial thank you

[@DaveGrayTeachesCode]

You're welcome, Sona!

[@Saikiran-ty8mo]

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 .

[@DaveGrayTeachesCode]

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.

[@patriciaksbr]

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

[@DaveGrayTeachesCode]

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.

[@patriciaksbr]

@@DaveGrayTeachesCode Awesome! Thanks for answering and for this amazing tutorial. That's very generous of you.

[@abdomahmoud8769]

1:47 why don't you just use auto format on save from the settings and disable prettier

[@DaveGrayTeachesCode]

Never slowed down to change those settings, but good suggestion! I have now removed Prettier.

[@manishankart6862]

Really a useful content👍

[@DaveGrayTeachesCode]

Glad to hear that!

[@dimitarantonov9778]

Just when you were thinking you can not like Dave Gray more.... and hop.... He likes not just tacos but The Dude too..... :)

[@ifeanyiuche4064]

This is 😅 complicated 😂 my brain is about to explode

[@DaveGrayTeachesCode]

You will get it. No rush. Take your time and refer to the provide documentation links if needed.

[@vasellious5134]

columns overlap eachother for me

[@DaveGrayTeachesCode]

Compare your code to the code available at the course resources link in the description. Also consider your screen width and then column width.