CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to create CSS columns in this tutorial for beginners. Multicolumns are possible in CSS without using CSS grid or flexbox. In this tutorial, we'll apply columns to multiple HTML paragraphs.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox
(00:00) Intro
(00:05) Welcome
(00:26) Setup
(01:01) Creating starting elements
(02:10) Adding columns to a container element
(03:37) Setting a column width
(05:00) columns shorthand
(05:27) column-rule
(06:39) column-gap
(07:05) Top margins and margin collapsing
(09:40) Adding a header to the columns
(11:07) break-inside
(11:43) break-before
(12:54) column-span
(18:16) Revisiting specificity
(20:12) Controlling line breaks with white-space
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the CSS Columns for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #columns #multicolumns

[@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!

[@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.

[@TravinskiyVladislav]

Thank you, Dave

[@anjaneyulub2529]

Thanks Dave ❤

[@TeomunMete]

Thank you. I haven't seen that anywhere

[@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! 🚀

[@konstantinzakharov5643]

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

[@blastofffpv]

That's a nice dutorial, man.

[@stormbytes]

Fantastic course so far!❤

[@DaveGrayTeachesCode]

Glad to hear that!

[@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! 💯

[@user-ml8rz2js9m]

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

[@jonkeck7489]

From one Kansan to another, very nice work!

[@DaveGrayTeachesCode]

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

[@detailsstudio21]

Thank you for this very quality content.

[@DaveGrayTeachesCode]

You're welcome!

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

[@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! 🙏

[@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! 🙏🙏

[@sonamohialdin3376]

Very useful tutorial thank you

[@DaveGrayTeachesCode]

You're welcome, Sona!

[@manishankart6862]

Really a useful content👍

[@DaveGrayTeachesCode]

Glad to hear that!

[@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

[@insteresting]

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

[@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

[@kaberanshutisamuel1856]

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

[@AnubhavSingh-nb3bt]

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

[@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?

[@Valdaur]

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.

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

[@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.

[@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.