DEV Community

Ridiculously easy row and column layouts with Flexbox

Andrew Stuntz on August 10, 2018

Super easy responsive Row and Columns in straight up CSS Grid layouts are the bread and butter of web development design and chances are...

Read full post

Nick Taylor • Aug 11 '18

Nice writeup. Here's some fun katas sites for Flexbox for those interested:

CSS Grid is starting to become mainstream and if you don't need to worry about legacy browsers, it's definitely the way to go for layout. Having said that, we've started using css grid at work, but Flexbox is still very useful.

I've started watching Jen Simmons' YouTube series. It's another great CSS resource. Here's a relevant video.

Cheers and looking forward to your next post!

Majd Rada • Jan 26 '22

Thanks for referring the flex box zombies game, it is very helpful.

Andrew Stuntz • Aug 11 '18

Thank you!

Yesss. I am so psyched about grid becoming more fully supported. I don't even consider myself too much of a front end expert and I look forward to getting to use grid. I will consider it more seriously the next time I work on something new!

Nick Taylor • Aug 11 '18 • Edited

👍

@wesbos has a great CSS Grid course if you're interested.

Nick Taylor (he/him)

Aug 10 '18

Yeah check out @wesbos ' JavaScript30.com. He also has a great free course thanks to Mozilla on CSS Grid. Check out cssgrid.io. If you enjoy listening to podcasts, Wes and Scott "El Toro Loco" Tolinski have a great one called Syntax. And lastly, he did an AMA on dev.to a while back that might interest you.

Sung M. Kim • Aug 11 '18

Thank you Andrew.

I've never thought about giving meaningful class names such as rows & columns.

It just made CSS much more readable.

Andrew Stuntz • Aug 11 '18

Haha, I know there are many people with many ideas about how to name classes and ID's in HTML and CSS. I have yet to use anything that I liked enough to stick with. So, I go with "sensible" and "meaningful" class names. But It sometimes still feels unorganized. One of the biggest reasons I like to use the above to layout pages, is that I can scope all my SASS to the outer level div, and that can help keep things organized. My opinions on class naming are evolving though, maybe I should write something about that next!

Sung M. Kim • Aug 11 '18

My opinions on class naming are evolving though, maybe I should write something about that next!

I'd love to read about it ❤️🕺

Nestor Zepeda • Aug 14 '18

I used to despise CSS for how complicated I found to set up a simple grid structure but this article made it super easy to understand. Thank you for this! I will definitely be referencing this in the future.

Tony Mobily • Nov 7 '19

I only have one simple question.
Why do you have:

display: flex;
flex-direction: column;

in .column?
Isn't this only if the column itself contains flex elements?

Rasmus Schultz • Mar 30 '20

That's what I was wondering.

I'm not an expert, but from this article, I understand that some flex properties are for flex parents, and some are for flex children.

So in this case, no need for any flex parent properties on the flex children.

Here's the last example on the page with extra properties commented-out - works just the same:

codepen.io/mindplay-dk/pen/oNXmwej

So all we need is this:

.row {
  display: flex;
  flex-wrap: wrap; /* only needed for responsive */
  width: 100%;
}

.column {
  flex-basis: 100%;
}

Also note that flex-wrap: wrap on the .row is only needed for responsive layouts - if you don't have any responsive rules, you don't need this, since nowrap is the default, and columns will divide the space and never wrap.

Tony Mobily • Apr 14 '20 • Edited

I am no expert either, but I have worked on the CSS a lot... here is the result:

codepen.io/mercmobily/pen/KKddYNJ

Basically:

The default CSS rules are set for the "large" layout; the "exception" is for small screens
That "flex: 1" actually means flex-grow : 1; flex-shrink : 1; flex-basis : 0; (courtesy of stackoverflow.com/questions/373862...). I set those values as defaults for every columns and...
Changed the CSS so that every column has the class 'column', but adding s2 or s3 makes them wider

I am not 100% sure when we would ever want to use flex-wrap: wrap;. However, I left it there.

I basically spelt every out in terms of CSS rules, and "reversed it out" to make it easier to understand.

Would you consider updating the article with this updated CSS? If not, I will be happy to write an article about it (obviously linking back to you!)

Rasmus Schultz • Apr 15 '20

I didn't write the article, just a comment 🙂

Wrong link? the link you posted is just a link to the codepen I posted? 😉

Rasmus Schultz • Apr 15 '20

I didn't write the article, I just wrote a comment 🙂

(Also, wrong link? The link you posted is just a link to the codepen I posted.)

Tony Mobily • Apr 15 '20

Ah I thought you were the author -- sorry!
I updated my comment with the correct link. Well spotted. I nearly had a heart attack, thinking that I had lost it!

Domitrius • Aug 14 '18

Definitely referencing this in my resource list my company is putting together!

Thanks Andrew :)

Andrew Stuntz • Aug 14 '18

This is the best feedback! Thanks!

Domitrius • Aug 14 '18

You've now inspired me to write up some cool stuff like this but for Sass. You da man.

Aaron H • Nov 17

Why nest divs here?

<div class="column">
  <div class="blue-column">
  </div>
</div>

You can apply multiple classes to a single element, and in this case, the nature of "being blue" does not interfere with "being a column".

If you wrote the CSS like:

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue {
  background-color: blue;
  height: 100px;
}

then you could do

<div class="column blue">
</div>

Flex, specifically, can get weird with nesting since the flexing only happens on the first direct descendant, and no additional semantic information is conferred by nesting a div inside of the other -- they are functionally equivalent here.

This may matter if you wanted to later add margin or padding to either the "column" div or the "blue" div, because only the column gets flexed, so that would affect how much of the column is used by blue, and it would be better to use the flex "gap" property (or similar) to set the spacing between the elements, rather than trying to math out how column and color relate.

Stargator • Aug 9 '19

Thanks Andrew,

This has been very helpful to me mostly because of the live examples.

As I was playing around with it. I wanted to try a layout with one row that contains three columns of different widths. In the third column are two rows.

I was able to get column 1 & 2 to have their own custom widths by using SASS and moving the custom class name to the same div the column class was declared, as you'll see in my example below.

But I was not able to get the third column to contain two rows. Could you offer any advice?

News Naama • Jul 3 '20

It’s actually a nice and helpful piece of info. I am happy that you simply shared this helpful info with us. row vs column

Please keep us informed like this. Thanks for sharing.

Mao Le • Jul 20 '21

Thank you for your guiding.

Nice article. In my opinion, I think that we may not need to use

flex-basis: 100%

in this case.

In addition, I didn't understand when I replace

flex: 1

by

flex-grow: 1

it doesn't work perfectly. Although, I know that the flex is a shorthand use for three properties are flex-grow, flex-shrink, and flex-basis.

This is my code for using flex-grow instead of flex.
codepen.io/mao-le/pen/BaRdNyM

vb2807 • Apr 23 '19

As mentioned by others indeed a nice article.

I think the introductory note about Bootstrap and Foundation really made sense to me. I'd to create a mocks for my engineering team and I was looking for a tool. Bootstrap is so well known that I downloaded it but wasn't sure the value it would provide if my mock is simple. Your introductory paragraphs made a lot of sense to me.

Thank you.

Ethical Hosting • Feb 4 '19

thanks for the tutorial, this is great. One question i have though is there a way to break a 2 row 3 column grid into a 3 row 2 column grid at say 960px wide and then to a one column grid at less than 768 wide?

Ben Halpern • Aug 10 '18

Thanks for the example-driven post. Super great resource.

caranocreative • Aug 11 '18

Thank you! I am new to web developing and I appreciate articles like yours that break things down in an easy to follow way.

Web Expressions • Sep 11 '22

How do you create a flexbox image gallery as the image below

Please could you help with this?

Thanks
Shane

Landon Spicer • Aug 11 '18

Great tutorial! I really appreciate it. Probably will change the way I build sites.

orliesaurus • Aug 11 '18

I use Bulma CSS for this kind of stuff - any other good libraries out there that support flexbox or simil?

zeddotes • Aug 10 '18 • Edited

Cool tutorial.

What if we wanna add a third row?

Think you mean "column". And the next paragraph, too, refers to "row" instead "column".

Andrew Stuntz • Aug 10 '18

Whoops. Thanks for the catch.

J Beetz • Aug 11 '18

Thanks for the great article and examples. I've just started reading about flex box on MDN. This article really helped me understand it.

Andrew Stuntz • Aug 11 '18

Yeah, I am glad it is helping! This is just one example of how to use flexbox though it is very powerful if you play with it a little bit. Flexbox has really helped me step up my front end skills. It makes things like centering and aligning trivial as long as you think about your layout a little bit before you put any code down.

Klaus Donnert • Aug 11 '18

... and wrapping it in a form will break it.

Ronald Flores Sequeira • Aug 11 '18

Great example, I would recommend a little grid framework, for the not that front end developer, that don't want to use bootstrap.
daneden.github.io/Toast/

Andrew Stuntz • Aug 13 '18

I've heard of toast, but I haven't used it. I'll dive in!

Latheresienne • May 22 '19

Great article!
I'm stuck with flex-basis. I don't understand it purpose in general. I make some changes to its values on codepen but I still can't get it. Can you explain please?

Andrew Stuntz • Aug 10 '18

Ohhh. I'll have to check this out.

brianreinhold • May 10 '23

What happened to the background color red in the 'some-page-wrapper' div?

Paul Israel • Oct 12 '18

You're a life saver... Thank you😊

Andras1000 • Jul 1 '19

Helpful, thanks!

Katie Adams • Aug 13 '20

Found this today and used it for my portfolio site, cannot thank you enough! Great use of flexbox and a well-written, informative, and clear example-led tutorial. Really fab stuff. :)

MAULIK RAJENDRA PATEL • Nov 24 '22

thank you so much, time saver.

Alex Alonso • Oct 23 '19

This is true mastery in flex stuff man

nigel447 • Jul 7 '23

great content. always the simple solution is the best

Ravinder Singh • Aug 10 '19

How we can add space between columns and bottom row margin

Rasmus Schultz • Sep 17 '19 • Edited

That's what I'd like to know. 🤔

I've seen one CSS library that uses the approach with just row, column and "double column", "half column" etc. classes. - it doesn't work and I'm not convinced it's possible without resorting to selectors like e.g. row.margin-20 > column with potentially specificity problems, and... suddenly things don't look that simple.

Of course, one option is to use another element to establish margins, e.g.:

<div class="row">
  <div class="column">
    <div class="margin-20">...</div>
  </div>
  <div class="column">
    <div class="margin-20">...</div>
  </div>
</div>

The problem with that of course is less elegant markup with extra elements, plus you have to carefully manage your column-margin elements and make sure they're all still the same width if you make changes, so... Not really a good approach either.

EDIT: these days, I'm taking an approach with more utility-classes, and by now I disagree with my last statement here. By now, I find that row and column being solely responsible for dividing into rows and columns, actually makes sense - I don't actually want any built-in padding or margins in grids, because this makes it harder to, say, fill a cell with a background, or use more/less whitespace in a particular cell, etc... So by now, I actually prefer the approach where another element is nested to add padding or background.

Brad R. Allen • Oct 30 '19

Looking for a way to have the text flow into the next column in a responsive way. Like a two-column magazine layout would. I'm not sure that's even possible.

Robin • Sep 28 '18

That's pretty straightforward challenge comes when you have nested columns/ equal height content column/ background images.

Jordan Shaw • Mar 23 '23

The header photo should probably have been credited and sourced to the artist Zimoun and his piece that was exhibited at Borusan Contemporary, Istanbul, Turkey, 2015.

ahernandez037 • Dec 13 '22

Thank you for this! Since angular flex box is being deprecated, I needed a simple solution just like this. Much appreciated!