Flexgrid system

Let's make responsive design easier. Let's stop thinking of a web page in terms of 12 columns. Instead, let's create columns that auto-expand/shrink to fill their parent. This is how flexbox works. Let's jump right into an example.

Markup

<div class="flex-row">
  <div class="flex-cell">1</div>
  <div class="flex-cell">2</div>
  <div class="flex-cell">3</div>
</div>

Result

1
2
3

First, let me mention that I added color, padding and centered text so you can see the example more clearly. Flexgrid does NOT presume you need any of those things and that's very important for a good layout model.

The parent element in the example is a flex-row. A flex-row element has no padding, margin or height and expands to fill the width of its parent. All flex-cell child elements expand to equal widths and fill the flex-row parent. The best part about this simple system is that it's responsive already--there's no need to define some extra styles for medium or small screens. The same styles apply to all screen sizes. Go ahead and resize the window. I dare you. You'll see what I'm talking about.

Another Example

You want to see that again, don't you? How about 5 columns of text with a little spacing between them?

Markup

<div class="flex-row spaced">
  <div class="flex-cell">
    Lorem ipsum ...
  </div>
  <div class="flex-cell">
    Donec molestie ...
  </div>
  <div class="flex-cell">
    Phasellus ...
  </div>
  <div class="flex-cell">
    Morbi efficitur ...
  </div>
  <div class="flex-cell">
    Pellentesque ...
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia a metus et viverra. Aliquam cursus eu lacus sed ultrices. Curabitur tortor mi, viverra a felis eu, dictum congue mi.
Donec molestie sapien a gravida porttitor. Ut interdum porttitor magna in vestibulum. Etiam non neque non elit pharetra tempus. Praesent pretium urna sed pretium convallis.
Phasellus dignissim eleifend arcu, sed feugiat sapien feugiat eu. Nulla magna mauris, bibendum nec velit quis, tempor pharetra nibh. Vestibulum facilisis nunc purus, in suscipit purus pretium vitae.
Morbi efficitur vulputate pulvinar. Duis consequat, risus sit amet aliquet vulputate, neque lectus suscipit tortor, non tristique libero velit sed metus. Mauris porta vehicula lobortis.
Pellentesque turpis turpis, pellentesque ut quam vitae, imperdiet luctus ex. Etiam vestibulum eros arcu, quis dapibus massa porta ut. Nulla semper erat sit amet fringilla aliquam.

This time I've put a faint border around each "flex-cell" so you can see how the spacing works. Also notice that all the cells are the same height even when the paragraph text isn't. That's something that's impossible to achieve without flexbox (unless you settle for static height).

Interested? Let's learn flexgrid layout

Sure, it's a fancy trick to be able to make equal-width, equal-height boxes on a screen. But how is this actually applicable? I'll tell you. Let's move on to some more realistic layouts using the flexgrid model.

Layouts