DEV Community

Cover image for Ridiculously easy row and column layouts with Flexbox
Andrew Stuntz
Andrew Stuntz

Posted on

Flex Two Columns Ridiculously easy row and column layouts with Flexbox

#css #html #javascript #webdev

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

At > 800px:

large responsive at greater than 800

At < 800px:

resonsive at less than 800

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!

Latest comments (52)

Collapse
 
reetha_dd8577431f91d32d9a profile image
Reetha •

Image description

Collapse
 
reetha_dd8577431f91d32d9a profile image
Reetha •

How can we split this. 2 rows 3 cols or 3 rows 3 cols.

Collapse
 
armahillo profile image
Aaron H •

Why nest divs here?

<div class="column">
  <div class="blue-column">
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

then you could do

<div class="column blue">
</div>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
nigel447 profile image
nigel447 •

great content. always the simple solution is the best

Collapse
 
brianreinhold profile image
brianreinhold •

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

Collapse
 
jshaw_18 profile image
Jordan Shaw •

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.

Collapse
 
ahernandez037 profile image
ahernandez037 •

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

Collapse
 
konregon profile image
MAULIK RAJENDRA PATEL •

thank you so much, time saver.

Collapse
 
webexpresions profile image
Web Expressions •

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

Image description

Please could you help with this?

Thanks
Shane

Collapse
 
maole profile image
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

Collapse
 
katieadamsdev profile image
Katie Adams •

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. :)

View full discussion (52 comments)