Flex Two Columns Ridiculously easy row and column layouts with Flexbox

Super easy responsive Row and Columns in straight up CSS

Grid layouts are the bread and butter of web development design and chances are you've reached for something like Bootstrap or Foundation to make your layouts a reality. But, like most of you, I don't have a fondness of the dependencies required to run Bootstrap or Foundation nor do I like the ding to my page load times.

In fact when I use Bootstrap for an application that I am writing, I really almost only ever use it for the grid layouts, sometimes I will use it for notifications or basic fairly sensible CSS defaults, but 90% of the time, all I want is the grid layouts.

I also don't appreciate only have options of splitting columns into 12 columns or less. It feels like you sometimes have to do some crazy work arounds to get columns in columns, or strange things like that.

How can we do grid layouts faster and easier? Flexbox is your answer. I think

Flexbox

At this point flexbox is pretty much everywhere. It's supported by all major browsers. It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first, but I have found my self reaching for flexbox first in web development as well.

In fact the last application I laid out, I did entirely with flexbox. I have found it that easy to use.

If you don't know too much about flex box. I like this page that gives a good run down of flexbox

Layout

First I wrap the entire page in a div.

<div class='some-page-wrapper'>
</div>

Then I define a .row and .column class that can help with the layout.

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

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

Now if we want a two column layout:

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>

The CSS looks like:

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

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

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

.green-column {
  background-color: green;
  height: 100px;
}

What if we wanna add a third column? The HTML is easily updated to:

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</div>

And we get a third column added. That seamlessly nests itself in our row.

Now what if we want more complicated layouts?

We can just add more rows, that is pretty easy.

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column Two
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Three
      </div>
    </div>
  </div>
  <div class='row 2'>
    <div class='column'>
      <div class='green-column'>
        Some Text in Row 2, Column One
      </div>
    </div>
    <div class='column'>
      <div class='orange-column'>
        Some Text in Row 2, Column Two
      </div>
    </div>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Row2, Column Three
      </div>
    </div>
  </div>
</div>

Or we can resize our columns.

To have a double column we can add a .double-column class. This can work with any sized column though, you can do 60/40, you can do 10/10/10/10/10/10/10/10/10/10, honestly any combination is possible here. You can do 1 X 100. Or 10 x 1, then 20 x 3, then 30 x 1. The options are endless!

On one layout, I added a large margin around my "column" and since the row will wrap down, I have one row with as many "columns" as I need. The columns were fixed width cards so they just wrap to the next line and flexbox neatly responsively wraps the cards down the screen.

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

This isn't very responsive though? We can add some responsitivity using media queries.

Just move the flex: 1 and flex: 2 into a media-query (size depends on application I'm just giving an option)

@media screen and (min-width: 800px) {
  .column {
    flex: 1
  }

  .double-column {
    flex: 2
  }
}

At > 800px:

At < 800px:

The final codepen, hint click the 1x or 0.5x buttons in the lower right corner to see the difference in the "responsive" layout.

Essentially we just blew the row/columns of bootstrap out of the water with 20 lines of CSS. We have a way to create row/column layouts quickly and since we use flexbox we barely have to worry about the layouts breaking, or anything going wrong. It's easily adapted to a wide variety of uses and allows a large amount of customizability. What do you think about flexbox? Have you tried it yet?

Another hidden benefit is that if I layout React components in this way, its pretty easy to layout React-Native components very easily to look similar.

I usually use SCSS in my projects so if you see something that isn't perfect CSS let me know!

Comments

[Nick Taylor]

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!

[Andrew Stuntz]

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]

👍

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

[Majd Rada]

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

[Sung M. Kim]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

Thanks Andrew :)

[Andrew Stuntz]

This is the best feedback! Thanks!

[Domitrius]

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

[Aaron H]

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]

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]

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]

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]

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.