CODEWITHSUNDEEP
cssflexbox
melkadri
melkadri

Reputation: 141

Responsive Design: Columns vs Flexbox

When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?

Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.

Upvotes: 7

Views: 6383

Answers (5)

Jonathan
Jonathan

Reputation: 51

I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:

When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/

When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.

Upvotes: 5

dataphile
dataphile

Reputation: 352

Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.

The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :

https://tutorialzine.com/2017/03/css-grid-vs-flexbox

Upvotes: 2

Jonas Grumann
Jonas Grumann

Reputation: 10786

When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/

For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/

Upvotes: -1

zsawaf
zsawaf

Reputation: 2011

Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.

The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!

TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.

Upvotes: 2

NathanJrT
NathanJrT

Reputation: 11

You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.

Upvotes: -1

Related Questions