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.
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?
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.
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!
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.
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!
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.
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.
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.👏👏👏👍👍😊🙃
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!
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 !
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.
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)!
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).
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
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
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
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
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 ...
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?
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??
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?
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
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.
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?
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.
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
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.
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.
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
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.
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 .
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.
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
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.
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
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.
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.
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.
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?
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.
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!
What makes this video great it is short and I learned something new ! Thanks again K.P
Awesome, glad to hear that John :).
Me too KP more power!! I never use this method thanks for sharing 😁
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???
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.
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!
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!
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.
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.
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.👏👏👏👍👍😊🙃
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!
Wish I knew this feature a year ago! Fantastic! It's responsive without flex or grid! Great tutorial Kevin! You rock my friend!
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 !
The 3 Ss: Short, Sweet, and Superb. Thanks.
I like your voice and the pace of your explanations!
Man, this is pretty amazing! Laughed when you straight up called it sexy
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.
This blew my mind. Where have you been all my life?
I was today years old when I found about this. Thanks!
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)!
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).
Thanks, Marce! I'll make sure to mention that when I do my next video on columns and using it with CSS grid 👍
Amazing content as always, thanks so much Kevin, you are the best!.. love from Portugal :)
So nice and responsively powerful!
Solved my many problems from this! Thankyou Kevin! 😊
That's great to hear SK Technohub!
Thank you for the video, Kevin! It's very useful!
I recommend p { word-wrap: break-word;) to avoid overflow problems with long words.
Wow. Definitely undervalued.
Wow great stuff again Kevin!
Thanks David!
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
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.
thanks for the explanation, i like these rare properties!!!
your voice makes my synapses tingle. also found this usefull! good job
Glad you like my voice Chris! And the video, of course!
This is going to make me a hero at work! I love your videos, they are incredibly helpful. Keep it up!
Hah, awesome, glad you liked it Devin!
Wow. What a secret? This is fantastic! Thank you, Kevin.
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
Thanks kevin.. Looking forward for some videos like this. Very helpful to me.. 😊
Please do more videos on deep use cases about column property. Thank You for this video.
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.
Amazing video! Thank you, Kevin! As always!
Wonderful! So quick and well explained, I appreciate it!
Love from Kerala India ;
Love you so much ;
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
Brilliant video! Straight to the point and informative! Cheers :)
I love your video, very explicit. Keep it up.
Wow! What an excellent video!! Thanks!! 😁
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
Great video! Did you do a deep dive into columns? :)
Great video, thanks! A nice use case is creating a feed like Pinterest.
Thank you, very well explained!
Can you do one short video about svg in your way
Is there anything specific about SVG you'd like? I tried to get into it, but I only know the very basics.
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 ...
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?
Good video. Thank you
No problem!
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??
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?
Have you got in the section of the HTML page?
Columns deep dive please
thank you
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
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.
Thanks
Hey Kevin thanks a lot. Does it work the same for images & texts columns?
Awesome!!
Does Firefox support column-span in 2020? Or still not?
Seems to, yup
@@KevinPowell Thanks.
Interesting can you reverse them on different t break points?
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?
Firefox now supports this. :)
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
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.
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
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.
Kevin Powell Yeah, I get it. Good to know, though! 😊
So GOOOOOD, why the hell use GRID ?
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.
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
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.
ty kevin :x
what is the font family of the heading that reads css colums
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 .
Awesome
Columns are boss!
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
WOW goodbye bootstrap grid, goodbye media queries! lol! thats awesome AND sexy as you said it!!
I'm thinking, if need be, I could do some hackey stuff and use it either in combo with or in lieu of Grid
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.
Vee useful tutorial
4:34 Am I the kitten?
They aren't used because big production builds use libraries like bootstrap
Thanks!!!!!!!!!!!!!!!
i love YOU!
How relevant is this in 2024? Is grid auto-fit a preferred solution now?
how do i make columns with links ?
thanks Kevin.
but can i use css columns in Bootstrap 3.7?
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.
Yes i can do anything...
thanks Kevin..
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
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.
Kevin Powell ok i ll try that and let you know if doesnt gets correct~
Kevin Powell nope it didnt work out text is going on image shud I do position relative?like for both image and text?
Deep dive into media queries please! #newvideo
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.
Can one insert images into this?
GREAT, is this still useful today, becz it's the first time i see such a thing.
good explanation. although it doesn't work as I thought. ;(
🤯
FireFox does support columns:
developer.mozilla.org/en-US/docs/Web/CSS/columns
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
You know its good if internet explorer supports it.
IE10 fully supports it :)
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.
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.
Not sure about sexy, you might need to get out more :-). Dead useful though, cheers
Hahaha, glad you liked it Richard :)
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.
this stuff is sexy lol :D nice video
i would have supported in patreon but it is not possible from Nepal.
Don't worry about it at all summon!
Hi Kevin, looking at caniuse and it says it has full Firefox support... Maybe Im looking wrong. caniuse.com/#search=columns
2018 vs. 2020
I'm late to the party on this one
The only bad thing about this is controlling where the content cuts off
0:50 to not waste your fucking time