The most underappreciated CSS property

[@PenguinjitsuX]

This was a great video! I was making columns of different card divs and this helped. Something to note is that with card style divs, columns by default will split your card into 2 pieces when pushing it from the end of one column to the next (the beginning of the div will be in the first column while the second part of it gets pushed on to the next column). To make sure each entire card stays in it's own column, you have to use "break-inside: avoid-column;" on the card class.

[@ilearnforever]

or set break-before:column to the card element

[@zaboogoosfraba6699]

What makes this video great it is short and I learned something new ! Thanks again K.P

[@KevinPowell]

Awesome, glad to hear that John :).

[@peenoise363]

Me too KP more power!! I never use this method thanks for sharing 😁

[@MegaRomull]

10 October, 2021 now firefox supports columns property :))))) I'm shocked with my ignorance 'cause 20 years I played anyway with CSS and nether used it... Thank you, Kevin!

[@oxysoxos]

I really like those short videos on some cool CSS features many beginners or intermediate coders might not be quite familiar with. Keep it coming, please. Personally, I would love to watch another in depth video about columns.

[@KevinPowell]

Glad you're appreciating these videos oxysoxos! I'll do one in a little bit, as they work really well with CSS Grid, and I think it's worth taking a look at that.

[@konraddariuszwoloszyn9206]

Are You kidding me, Kevin? Why does nobody talk about CSS columns? That is such a great property and I never heard of it before. So, thanks a lot for creating this vid! Im not sure if You should do another video on this topic. Use cases are obvious. Maybe move on to another, interesting topic?

[@KevinPowell]

I don't know why they aren't talked about or used more often, as you said, they are pretty cool. Do check how it's working in different browsers though, it's not always super consistent in where the columns break.

[@chrisskjrvik4568]

This is such a life saver! I've tried multiple books and web resources to understand columns, but it all went in one ear and out the other. But this made complete sense!

[@StarOnCheek]

There is no way! This is so useful!!! This is much better than grid or flexbox is so many situations. How have I never heard about this???

[@ilearnforever]

Literally isnt it? I thought the same when I learned about this property. Since then, I've been playing with it.

[@yousseftijdit]

Oh my ! When nobody mentions this property, you're the only one to do it. it helped me save lots of time instead of always using the "display:table/table-cell". Thankies !

[@CAbbott71]

Thank you. I have been bashing my head against a wall trying to find a solution to the layout I want, and this feature does it. Too Easy!

[@germanbaena6579]

Kevin, esto es maravilloso, que locura de propiedad CSS , pero lo que más me desconcierta es que ya hace cinco años lo habías enseñado... carajo, ¿dónde estaba yo? Mil Gracias!

[@davidheidari2188]

I like your voice and the pace of your explanations!

[@CyberTechBits]

Wish I knew this feature a year ago! Fantastic! It's responsive without flex or grid! Great tutorial Kevin! You rock my friend!

[@elkhanhamet2561]

Ohhhh Kevin you're a lifesaver, I've spent literally entire night trying to to get this working properly, but when I was resizing things would start fall apart meanwhile seeing how perfectly well it was working on other people's sites. And your video solved it all. I would give you a golden medal for that.👏👏👏👍👍😊🙃

[@snakemanluffy7645]

1 year ago one of my client wanted me to make such column layout. I was confused! . Couldn't find the the solution because I didn't know about it. But then my client informed me about it. I was surprised! It's really underrated.

[@mascatrails661]

Man, this is pretty amazing! Laughed when you straight up called it sexy

[@natalieacevedo4575]

Amazing content as always, thanks so much Kevin, you are the best!.. love from Portugal :)

[@DaveMcGarry]

Wow great stuff again Kevin!

[@KevinPowell]

Thanks David!

[@sergei_sg]

Thank you for the video, Kevin! It's very useful!

[@najmantube]

End of 2022: works equally well on Edge/Firefox/Chrome (Windows 10). Works pretty well with images too (although there can be awkward layouts at certain sizes). Very useful, thanks (and Merry Christmas / Happy New Year)!

[@k.chriscaldwell4141]

The 3 Ss: Short, Sweet, and Superb. Thanks.

[@devincenatiempo2238]

This is going to make me a hero at work! I love your videos, they are incredibly helpful. Keep it up!

[@KevinPowell]

Hah, awesome, glad you liked it Devin!

[@drviagrin3798]

So nice and responsively powerful!

[@shariquekhanoriginal]

Solved my many problems from this! Thankyou Kevin! 😊

[@KevinPowell]

That's great to hear SK Technohub!

[@sashatv138]

Amazing video! Thank you, Kevin! As always!

[@martumbao2760]

Thanks kevin.. Looking forward for some videos like this. Very helpful to me.. 😊

[@CGEarts]

your voice makes my synapses tingle. also found this usefull! good job

[@KevinPowell]

Glad you like my voice Chris! And the video, of course!

[@jessicahancock1755]

Wonderful! So quick and well explained, I appreciate it!

[@СашаТюменцев-ш9ь]

thanks for the explanation, i like these rare properties!!!

[@chunk1978]

From Firefox version 65: CSS column-span is behind the "layout.css.column-span.enabled" preference, which needs to be set to true. So now, at least, it's behind a flag so we should see full support soon/whenever/never.

[@ninoid51]

Brilliant video! Straight to the point and informative! Cheers :)

[@EricHillAuthor]

Wow. What a secret? This is fantastic! Thank you, Kevin.

[@tigochi]

I wonder whether there's a way of positioning and keeping text elements at absolute top of a column when there's for example a browser window stretching ...

[@karenrawson4930]

This blew my mind. Where have you been all my life?

[@ArctimConsult]

I love your video, very explicit. Keep it up.

[@adamlacasse4679]

I was today years old when I found about this. Thanks!

[@producermind9030]

Wow. Definitely undervalued.

[@rmcellig]

Wow! What an excellent video!! Thanks!! 😁

[@seemsas]

I used columns a while back but totally forgot ist meanwhile. Thanks for the heads up. I would appreciate some usecases especially in combination with grid or flexbox

[@KevinPowell]

Yeah, I don't use them too often either. I'll try to come up with a few fun ways to use them, though it probably won't be next week.

[@chome4]

If a column has a heading, how do you get that heading stay 'fixed' at the top and the text underneath it to stay with it? ie, no matter what width the page, the heading will always be a the top.

[@jonathanhammond5563]

Hi Kevin, one unfortunate aspect of columns I could not use was making cards. I am basically replicating tumblr and how it has somewhat of a masonry layout, 2-columns where the image/content dictates the height of the card, but the width is always the same. In this case, I actually had a card cut out from the left to the right, so the top of the card and image is on the bottom of the left column, and the right column has the rest of the image/card at the top. Basically the same as how you have your paragraph going from column to column

[@alxhrrs]

Yeah colums are great but I'm having one problem that I can't find a solution to: a faq's page with about 50 faqs, each with a simple layout, just question and answer, BUT...they are collapsibles. When I quick on a few faq items in the left column, the last one in the left column shifts to the right column. I can't figure this out. Does anyone know what I'm doing wrong??

[@mangouni]

Great video! Did you do a deep dive into columns? :)

[@marcelocrocco8133]

Thank you for the video, very good explained. Thank you for sharing. There´s another property of "columns" called "column-fill" which controls how the text fills the columns (balance, auto, initial).

[@KevinPowell]

Thanks, Marce! I'll make sure to mention that when I do my next video on columns and using it with CSS grid 👍

[@Ahrysa]

I wish I knew this before setting up my restaurant site for class lol. My divs keep disappearing n being sent to eeby deeby instead of stacking in a column at mobile size

[@caigner]

I need two columns and a floating image on the right side of the second column, with text flowing around the image. Any suggestions on how I could accomplish this?

[@Binyamin1444]

But what if you want your columns to start at a certain point in the paragraph, rather than mid sentence..? Or did I miss something

[@iliketocode6986]

Interesting can you reverse them on different t break points?

[@stevenstordal251]

I really liked this approach, and got the code from code pen :) But when I check my page on an iPhone, the columns don't change, I still have 3 columns, but with really small text. I realize that it's possible to add media-info in css, but I thought the point of this was that I didn't need to. Did I miss something?

[@najmantube]

Have you got in the section of the HTML page?

[@junaihd2743]

Love from Kerala India ; Love you so much ;

[@joemcfadyen3500]

what is the font family of the heading that reads css colums

[@MyNegativeCreep]

Does Firefox support column-span in 2020? Or still not?

[@KevinPowell]

Seems to, yup

[@MyNegativeCreep]

@@KevinPowell Thanks.

[@salehmajeed]

Hey Kevin thanks a lot. Does it work the same for images & texts columns?

[@tbdrosa8542]

thus was very helpful, thank you for this !! With this same technique do you know if it's possible to make three columns - but to keep the text separated so they stay within their own designated column?

[@coreyf9475]

Soooo, let's say I want 3 columns. The first column is to be black, the second column will hold a logo, the third column will be black. Also, I want to link from index.html to mystyle.css. I can not find how to do that anywhere.

[@listiy4700]

how do i make columns with links ?

[@kaifscarbrow]

Awesome. This would have made it easier to achieve that design I'm working on(specifically with the break-inside: avoid), if only the individual columns could be styled

[@domanickharper]

This seems like the beginning of a quick and dirty site build. Having the header and its' content span all while the rest of the site or sections of ther site are columns and then there's not a big need to worry about the screen size so long as the minimum width is set to the screen size of a phone

[@najmantube]

I recommend p { word-wrap: break-word;) to avoid overflow problems with long words.

[@MathinusG]

Can one insert images into this?

[@afsanazamannipa7711]

Please do more videos on deep use cases about column property. Thank You for this video.

[@KevinPowell]

I find it a ton of fun, but I haven't been using it a ton lately. If I run into a good use case, I'll definitely look into making a video on it.

[@NixTheG0at]

hi kevin,ty for your great work, one question, if we can create columns with this property,so why we need other things like flex box and grid or floating elements ? is it posible to just use this column property instead of those? thank you

[@KevinPowell]

It doesn't really give us the same type of control. It's to take one block of content and split it up (you could even have a grid split across columns!). It has it's uses, but it's not really to control the big picture of a layout.

[@NixTheG0at]

ty kevin :x

[@shariquekhanoriginal]

I have an error please someone solve! When my screen size gets small my paragraph goes over the picture beside it! I have used columns, max-width too and display flex and grid also i had tried please help

[@KevinPowell]

Could it be that the image is spilling out of it's parent? If a div (or anything else) is narrower than the image, the image simply falls out the side. You could use 'overflow: hidden;' on the parent of the image.

[@shariquekhanoriginal]

Kevin Powell ok i ll try that and let you know if doesnt gets correct~

[@shariquekhanoriginal]

Kevin Powell nope it didnt work out text is going on image shud I do position relative?like for both image and text?

[@MdShahid-pj5uo]

thanks Kevin. but can i use css columns in Bootstrap 3.7?

[@KevinPowell]

As Shaurya said, there is no reason you can't. You can do anything with Bootstrap, it's just a big CSS file, and you use what you want from it effectively.

[@MdShahid-pj5uo]

Yes i can do anything... thanks Kevin..

[@luiz.henrique9]

Great video, thanks! A nice use case is creating a feed like Pinterest.

[@ОлександрТимощук]

Good video. Thank you

[@KevinPowell]

No problem!

[@milleniummoses]

I'm thinking, if need be, I could do some hackey stuff and use it either in combo with or in lieu of Grid

[@KevinPowell]

Interestingly, a grid cell can break over columns. I'm trying to find a use for it and to make a video about it. So far, not sure, but it seems cool.

[@inglesdegraca6730]

Awesome!!

[@nathancornwell1455]

this almost kinda seems like declaring display:flex; .. i mean of course you clearly have more control over the content with flexbox in general but i do like the idea of not needing a media query .

[@milanm6538]

Thank you, very well explained! Can you do one short video about svg in your way

[@KevinPowell]

Is there anything specific about SVG you'd like? I tried to get into it, but I only know the very basics.

[@vukosavljeva]

Wow, what a great vid. Didn't know about this... Thanks a lot! It would be nice if it could be applied to div's, aswell :D

[@KevinPowell]

It can be! You could have 20 cards automatically placed into columns, which is fun. It could give you a Pinterest style layout without much trouble, really.

[@vukosavljeva]

Wait, so you can give a "columns" property to a div? And it acts like a paragraph in this video? Wow...that's cool :D Why even bother with flex box or floats and margins, when it comes to simple designs were you need them to stack next to each other. :D

[@KevinPowell]

One issue is the order things go in, since things are sorted in columns, instead of left to right: codepen.io/kevinpowell/pen/ZxYzNb?editors=1100 - this can be good for text, but depending on your layout, can be bad for cards, or things that should be seen in a specific order.

[@vukosavljeva]

Kevin Powell Yeah, I get it. Good to know, though! 😊

[@rporta]

thank you

[@Sugurous]

Thanks

[@samwoodward8031]

Hi Kevin, looking at caniuse and it says it has full Firefox support... Maybe Im looking wrong. caniuse.com/#search=columns

[@KeksBln]

2018 vs. 2020

[@iliketocode6986]

They aren't used because big production builds use libraries like bootstrap

[@gyanendrarawat5421]

Awesome

[@bmehder]

How relevant is this in 2024? Is grid auto-fit a preferred solution now?

[@isaacbaptista6207]

Columns deep dive please

[@pradeepn7]

So GOOOOOD, why the hell use GRID ?

[@dancarter6044]

Columns are boss!

[@inayathkhan100]

Vee useful tutorial

[@tharakakarunarathne5346]

Firefox now supports this. :)

[@strudast]

WOW goodbye bootstrap grid, goodbye media queries! lol! thats awesome AND sexy as you said it!!

[@normanejm]

Thanks!!!!!!!!!!!!!!!

[@shariquekhanoriginal]

Deep dive into media queries please! #newvideo

[@KevinPowell]

I have a very short video on them, but it's the opposite of a deep dive, lol. I'll add it to my list.

[@code.cracking]

GREAT, is this still useful today, becz it's the first time i see such a thing.

[@daves516]

i love YOU!

[@plnit2784]

4:34 Am I the kitten?

[@greg6094]

I've found it to be very flaky in real world use: lots of alignment issues if a list is split into columns using CSS.

[@KevinPowell]

You might want to look into the avoid-break property to go with it. Most of the issues revolve around an element splitting 2 columns, or even just it's margin going across them. It's not perfect by any means, but that can go a long way.

[@summonshr]

i would have supported in patreon but it is not possible from Nepal.

[@KevinPowell]

Don't worry about it at all summon!

[@AnimeRPG1]

FireFox does support columns: developer.mozilla.org/en-US/docs/Web/CSS/columns

[@KevinPowell]

Did I say it doesn't support it? Sorry, the I made this awhile ago and don't remember. I might have said it has partial support, as it doesn't support break-before and break-after, which it still doesn't support - developer.mozilla.org/en-US/docs/Web/CSS/break-after

[@ZahinAbdullah]

good explanation. although it doesn't work as I thought. ;(

[@robertshaw4990]

🤯

[@techtipsuk]

Not sure about sexy, you might need to get out more :-). Dead useful though, cheers

[@KevinPowell]

Hahaha, glad you liked it Richard :)

[@frankroos1167]

Master Kevin sounds like he missed some sleep. Or do I hear IPA? And even now, years later, we are still not talking about columns. Oh dear, "We don't talk about columns"......can make a really corny parody song out of that.

[@theinvertedpineapple942]

You know its good if internet explorer supports it.

[@KevinPowell]

IE10 fully supports it :)

[@sm1ley732]

this stuff is sexy lol :D nice video

[@paalpaulsen]

Found this use of columns very interesting also: kzbin.info/www/bejne/rmLUnX6sf8l7sKs&pp=ygUTY3NzIGNvbHVtbnMgbWFzb25yeQ%3D%3D

[@TheFefiiiii]

0:50 to not waste your fucking time

[@stephenpetersen3607]

I'm late to the party on this one

[@ellisj98]

The only bad thing about this is controlling where the content cuts off